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}}
 </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.fontcolor =30;

方法二:

<div ng-style = "fontcolor">Hello Word !!!</div>
$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 都是一些看过即懂的东西，非常显而易见。在这里就不再赘述。