您的位置:首页 > Web前端 > AngularJS

Angular 常用ng指令详解

2015-08-19 20:57 609 查看

详解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事件,自己手动修改变量值。

除了以上几个指令,其他例如 ng-if 、 ng-show 、 ng-src 、 ng-href 都是一些看过即懂的东西,非常显而易见。在这里就不再赘述。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  angularjs 内置指令