angularJS操作input元素代码实例

快乐打工仔 分类:实例代码

本章节分享一段angularJS中input指令的一段代码实例。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<title>前端教程网</title> 
</head>
<script src="js/jquery.js">
</script>
<script src="js/angular.min.js">
</script>
<body ng-app="Demo">
<div ng-controller="TestCtrl">
  <input type="text" ng-model="a" test />
  <button ng-click="show(a)">查看</button>
</div>
</body>
<script>
var app = angular.module('Demo', [], angular.noop);
app.directive('test', function(){
  //input 指令的 link有第四个参数,$ctrl有些方法,你可以自己拿来用
  var link = function($scope, $element, $attrs, $ctrl){
    console.log( $ctrl )
    $ctrl.$formatters.push(function(value){
      return value.join(',');
    });
    $ctrl.$parsers.push(function(value){
      return value.split(',');
    });
  }
  return {compile: function(){return link},
    require: 'ngModel',
    restrict: 'A'}
  });
  app.controller('TestCtrl', function($scope){
    $scope.a = [];
    //$scope.a = [1,2,3];
    $scope.show = function(v){
      console.log(v);
    }
});
</script>
</html>

angularJS操作input元素代码实例,这样的场景在实际项目中还是用的比较多的,关于angularJS操作input元素代码实例就介绍到这了。

angularJS操作input元素代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容