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 都是一些看过即懂的东西，非常显而易见。在这里就不再赘述。