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

来源：互联网发布：sql怎么删除联合主键编辑：程序博客网时间：2024/06/03 06:30

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>

0 0