详解Angular ng内置指令
我们依次从使用频率高到低来,重要性大小来说明各种指令。
1、ng-repeat
1.1 一般用法
<ul>
<li ng-repeat="char in
[{'alphabet': 'K'},
{'alphabet': 'A'},
{'alphabet': 'V'},
{'alphabet': 'L'},
{'alphabet': 'E'},
{'alphabet': 'Z'}] " >
{{char.alphabet}}
</li>
</ul>
这是一个用于展示的示例程序。在真正的代码开发中,我们一般会单独申明一个变量来存储这些需要repeat的数据。例如:
var chars= [{'alphabet': 'K'},{'alphabet': 'A'},{'alphabet': 'V'},{'alphabet': 'L'}, {'alphabet': 'E'}, {'alphabet': 'Z'}] ;
然后在html文件中这么写:
<ul>
<li ng-repeat="char in chars" >
{{char.alphabet}}
</li>
</ul>
这里char相当于是一个循环变量,类似于c++里面的迭代器。直接就是chars数组对象里面的一组数据。跟一般的数据绑定相似,可以直接进行数据访问。
1.2 进阶用法
现在,我们就要用到 ng-repeat 里面提供的东西了:
$index
$first
$middle
$last
<ul>
<li ng-repeat="char in chars">
{{$index}} {{char.alphabet}}
</li>
</ul>
在html内就可以直接使用了,通过这个 再加上ng-class 或者ng-style 指令可以实现表单奇偶行背景颜色交替出现的效果了。
另外,repeat是根据内容hash出来的一个唯一id进行遍历,如果你拥有重复的多组数据,可以使用通过Index进行遍历。
<ul>
<li ng-repeat="char in chars track by $index">
{{char.alphabet}}
</li>
</ul>
2、ng-click
这是一个非常普通的angular 点击事件入口,可以跟其他指令配合使用,例如ng-repeat,就能实现一些比较简单的功能。
<ul>
<li ng-repeat="char in chars">
<a ng-click="vote($index)">{{char.alphabet}}<a>
</li>
</ul>
这样就可以直接将数组对应的index传入函数中,也可以传入任何在scope已经声明过的变量。
3、ng-class
这是一个非常酷的内置指令,通过这个,你可以实现通过在scope内声明的变量自由变换css 的class,而你只需要动动手指头改改变量内容即可:
<style>
.red {background-color: red;}
.blue {background-color: blue;}
</style>
<div ng-controller="CurTimeController">
<button ng-click="getCurrentSecond()" >Get Time!</button>
<p ng-class="{red: x%2==0,blue: x%2!=0}" >Number is: {{ x }}</p>
</div>
.controller('CurTimeController', function($scope) {
$scope.getCurrentSecond = function() {
$scope.x = new Date().getSeconds();
};
})
4、ng-style
ng-style 是用来控制你具体的css class 内各种属性的值。基本上有两种方法来实现这一点:
方法一:
<div ng-style="{'font-size':'{{fontcolor}}px'}">Hello World !!!</div>
<!--声明在scope内的代码-->
$scope.fontcolor=30;
方法二:
<div ng-style="fontcolor">Hello World !!!</div>
<!--声明在scope内的代码-->
$scope.fontcolor={'font-size':'30px'};
5、ng-checked
ng-checked 顾名思义就是给哪些拥有checked属性的组件例如 checkbox 绑定上变量,如果为true就是选中,若为false,就是未选中。
<input type="checkbox" ng-checked="someProperty"
ng-init="someProperty = true" ng-model="someProperty">
代码非常简单,但是我要提醒大家,这个绑定是单项绑定。也就是说,如果someProperty初始声明值为true,用ng-checked 绑定了这个属性,在页面上你如何点击这个checkbox,这个someProperty的值恒为true。除非你在scope内手动将someProperty的值变成false,那么在浏览器上,对应的checkbox就显示为未选中状态。
那么如何解决这个问题呢?
恕我愚钝,我并没有看到什么其他很好的解决办法,唯一的办法就是再给这个checkbox绑定上click事件,自己手动修改变量值。