Reading Notes for AngularJS -- Chapter4

Chapter4

Displaying and Formatting Data

---

AngularJS 的惯用指令

应用场合	书写方式	用例
AngularJS 文档	camel-case	ngModel
模板中	snake-case	ng-model(建议使用)
模板中	冒号分隔符	ng:model
模板中	冒号分隔符	ng_model
模板中	冒号分隔符	x+ngModel

Interpolation directive

• 方法1：

<span>{{expression}}</span>

• 方法2：等效于方法1，但是此方法可以在AngularJS处理表达式之前（页面初次加载时）将其隐藏，可以放置UI闪烁；

<span ng-bind="expression"></span>

包含在表达式中的HTML

AngularJS 不建议在表达式中插入HTML标签；因为插值指令会对表达式中的任何HTML标签进行转义；
- 关掉默认HTML标签转义的指令：

此指令允许注入任何HTML标签，慎用！！！

<p ng-bind-html-unsafe="msg"></p>

此指令中和了ng-bind和ng-bind-html-unsafe指令；

<p ng-bind-html="msg"></p>

使用ng-bind-html指令必须加载ngSanitize模块

条件化显示

操作指令	含义
ng-show/ng-hide	用于显示／隐藏DOM，不能从DOM树中移除
ng-switch	是一个指令集，可以增加／删除DOM节点
ng-if	与ng-switch相似
ng-include	根据表达式的结果条件加载显示模板
ng-repeat	迭代集合中的每一个元素，并创造新的scope
	会声明一组特殊的变量$index, $first, $middle, $last
	迭代对象的属性，<p ng-repeat="(name, value) in user"></p> {{name}}, {{value}}
	将ng-repeat,ng-controller进行组合可以控制显示表格单行／显示表格多行
ng-class-even	控制表格的奇数行<tr ng-repeat="user in users" ng-class-even="'light-gray'" ng-class-odd="'dark-gray'"</tr>>
ng-class-odd	控制表格的偶数行
ng-class	接受对象作为参数<tr ng-repeat="user in users" ng-class="'{'dark-gray' : !$index%2, 'light-gray' :$index%2}'"></tr>

过滤器

• 书写格式

ng-repeat="item in backlog | filter:{name: criteria, done: false}"