【AngularJS: Up & Running】第02章_基本的AngularJS指令及控制器

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', 'done': false},
                    {'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设置不同的布局。

变量名	类型	作用
$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>