布尔属性指令：
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);
};
});
原文链接：https://www.f2er.com/angularjs/149555.html