angular---常用指令总结
|
布尔属性指令： ng-disabled可以把disabled属性绑定到以下表单输入字段上： input，textarea,select,button <button ng-model="button"ng-disabled="!someProperty">Abutton</button> 当!someProperty=true时，button就被禁用 ng-readonly,Ng-selected的用法如上。 类布尔属性指令： ng-href,动态创建URL时，用ng-href代替href <ang-href="{{myHref}}">I'm feeling lucky</a> ng-src告诉浏览器在ng-src对应的表达式生效之前不要加载图像 使用作用域 ng-app，ng-app属性的DOM元素将被标记为$rootScope的起始点 ng-controller,为嵌套在其中的指令创建一个子作用域 ng-include,加载、编译并包含外部HTML片段到当前的应用中 ng-switch,这个指令和ng-switch-when及on="propertyName"一起使用，可以在propertyName发生变 化时渲染不同指令到视图中 <div> <inputtype="text" ng-model="person.name"/> <div ng-switchon="person.name"> <png-switch-default>And the winner is</p> <h1ng-switch-when="Ari">{{ person.name }}</h1> </div> ng-view,指令用来设置将被路由管理和放置在HTML中的视图的位置。 ng-if,使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素 ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而 是真正生成或移除节点。 ng-repeat,用来遍历 $index：遍历的进度（0...length-1）。 q $first：当元素是遍历的第一个时值为true。 q $middle：当元素处于第一个和最后元素之间时值为true。 q $last：当元素是遍历的最后一个时值为true。 q $even：当$index值是偶数时值为true。 q $odd：当$index值是奇数时值为true 个集合或为集合中的每个元素生成一个模板实例
<ulng-controller="PeopleController"> <ling-repeat="person in people" ng-class="{even: !$even,odd:!$odd}"> {{person.name}}lives in {{person.city}} </li> </ul> .odd { background-color:blue; } .even { background-color:red; } angular.module('myApp',[]) .controller('PeopleController',function($scope){ $scope.people = [ {name:"Ari",city: "San Francisco"}, {name:"Erik",city: "Seattle"} ]; }); Ng-init,ng-init指令用来在指令被调用时设置内部作用域的初始状态 {{ }},{{ }}语法是AngularJS内置的模板语法，它会在内部$scope和视图之间创建绑定 ng-bind,作用和{{}}一样，只是不会出现闪屏的现象 ng-cloak, 除使用ng-bind来避免未渲染元素闪烁，还可以在含有{{}}的元素上使用ng-cloak指令： <bodyng-init="greeting='HelloWorld'"> <p ng-cloak>{{greeting }}</p> </body> ng-bind-template, 同ng-bind指令类似，ng-bind-template用来在视图中绑定多个表达式。 <divng-bind-template=" ng-model,指令用来将input、select、text area或自定义表单控件同包含它们的作用域中 的属性进行绑定。它可以提供并处理表单验证功能 {{message}}{{name}}"></div> 事件指令 ng-change, 这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入，这个指令要 和ngModel联合起来使用。 <divng-controller="EquationController"> <inputtype="text" ng-model="equation.x" ng-change="change()"/> <code>{{equation.output }}</code> </div> angular.module('myApp',[]) .controller('EquationController',function($scope){ $scope.equation ={}; $scope.change =function() { $scope.equation.output=parseInt($scope.equation.x) + 2; }; }); ng-form,用来在一个表单内部嵌套另一个表单。普通的HTML <form>标签不允许嵌套，但ng-form可以。 ng-click,用来指定一个元素被点击时调用的方法或表达式。 ng-select,用来将数据同HTML的<select>元素进行绑定。这个指令可以和ng-model以及ng-options指令一同使用，构建精细且表现优良的动态表单 ng-submit, ng-submit用来将表达式同onsubmit事件进行绑定。这个指令同时会阻止默认行为（发送请求并重新加载页面），除非表单不含有action属性 Ng-class,使用ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式 <divng-controller="LotteryController"> <divng-class="{red: x > 5}" ng-if="x >5"> You won! </div> <buttonng-click="x = generateNumber()" ng-init="x =0"> Draw Number </button> <p>Number is:{{ x }}</p> </div> .red { background-color:red; } angular.module('myApp',[]) .controller('LotteryController',function($scope) { $scope.generateNumber= function() { returnMath.floor((Math.random()*10)+1); }; }); 当随机数大于5时，新类会被添加 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |