1 数组的操作与显示（ng-repeat简单使用）
ng-repeat使用类似for-each循环
<div ng-repeat="note in ctrl.notes"> <span class="label">{{note.label}}</span> <span class="status" ng-bind="note.done"></span> </div>
angular.module('notesApp',[])
.controller('MainCtrl',[function () {
var self = this;
self.notes = [
{'label': '标签1','done': true},{'label': '标签2','done': false},{'label': '标签3',{'label': '标签4','done': false}
];
}])
2 ng-bind与花括号表达式
花括号表达式在第一次加载页面时浏览器会将其转化为ng-bind，在这个短暂时间里，可能会出现{{name}}直接显示在浏览器上的情况。因此推荐使用ng-bind。
另一种解决办法是：使用ng-cloak指令。
3 ng-cloak
在AngluarJS启动到加载完毕之间的时间段内隐藏掉界面。
源码如下：
[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak{ display:none !important; }
注意：ng-cloak的CSS是angular.js源代码的一部分，如果在HTML的最后才加载AngluarJS库，就晚了。最佳做法：将上面的CSS添加到自己的CSS中，并确保它在HTML显示之前就已经被正确加载。
4 ng-show和ng-hide
通过绑定一个布尔型的变量（true:非空字符串、非0数字、非空JS对象），AngularJS就能控制UI显示与否。
5 ng-class
用于选择性地从HTML元素中添加或者删除CSS class。
在下方代码中，当note.done为true时，会添加名为done的CSS class并删除pending。反之亦然。
CSS代码：
<style> .done { background-color: green; } .pending { background-color: red; } </style>
JS代码：
self.getNoteClass = function (status) {
return {
done: status,pending: !status
}
};
<div ng-repeat="note in ctrl.notes" ng-class="ctrl.getNoteClass(note.done)"> <span class="label">{{note.label}}</span> <span class="assignee" ng-show="note.assignee" ng-bind="note.assignee"> </span> </div>
6 ng-repeat拓展
6.1 作用于对象上的ng-repeat
ng-repeat不仅能显示一组HTML元素，还可以显示一个对象的所有属性。
<div ng-repeat="(author,note) in ctrl.notes" ng-class="ctrl.getNoteClass(note.done)"> <span class="label">{{note.label}}</span> <span class="done" ng-bind="note.done"></span> </div>
6.2 ng-repeat中的辅助变量
可以用于为HeaderView、FooterView、其他特殊Item设置不同的布局。
| 变量名 | 类型 | 作用 |
|---|---|---|
| $first | boolean | 是否为列表的第一个元素 |
| $middle | boolean | 是否为非第一个且非最后一个元素（是否为中间的元素） |
| $last | boolean | 是否为列表的最后一个元素 |
| $index | int | 该元素在当前列表的索引(从0开始) |
| $odd | boolean | 当前列表元素索引是否为为奇数(从0开始数，0为偶数) |
| $even | boolean | 当前列表元素索引是否为偶数 |
6.3 根据ID判断重复性（track by）
用于缓存或重用已有的DOM元素。
如果不适用track by，angularJS默认会把原先的DOM节点全部删除，再插入新的节点。然而Dom 的频繁操作是非常不友好的，非常影响性能。我们可以使用track by来重用已有的 Dom 元素，避免上述问题。
<div ng-repeat="note in ctrl.notes2 track by note.id"> {{note.$$hashKey}} <span class="label">{{note.label}}</span> <span class="done" ng-bind="note.done"></span> </div>
警告：千万不要在应用中定义$$开头的变量。原因不多说。
6.4 跨HTML元素的ng-repeat
AngularJS可以标记ng-repeat的作用范围，从而决定哪些HTML元素是ng-repeat的一部分。标记操作可以通过ng-repeat-start和ng-repeat-end指令进行。
<table> <tr ng-repeat-start="note in ctrl.notes"> <td>{{note.label}}</td> </tr> <tr ng-repeat-end="note in ctrl.notes"> <td>Done:{{note.done}}</td> </tr> </table>
