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
    }
};

HTML代码：

<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设置不同的布局。

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>