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用来在视图中绑定多个表达式。

<div ng-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时，新类会被添加