Angularjs学习笔记（五）----显示和格式化数据

一、引用指令

　　在AngularJS的文档中，所有指令的名字以驼峰命名法。而在模板中，则需要以蛇形命名法。可以以冒号分割（ng：model）或下划线分割（ng_model），更常见的是以ng-model这种样式命名。如果是HTML5，前面可以加上data，如data-ng-model。

二、插值指令

　　用花括号界定的表达式，如：

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

　　插值指令会对模型中的任意HTML内容进行转义，这是为了防止注入攻击。例如：

$scope.msg='Hello,<b>World</b>!';
<p>{{msg}}</p>
渲染后会对模型中的任意HTML内容进行转义,最后结果为：
<p>Hello,&lt;b&gt;World&lt;/b&gt;!</p>

　　如果因为某些理由，包含HTML标记的模型要被浏览器求值和渲染，那么可以用ng-bind-html-unsafe指令来默认关掉默认的HTML标签转义：

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

　　AngularJS还有一个指令----ng-bind-html，它能选择性的净化指定的HTML标签，同时允许其他标签被浏览器解释。他的用法如下：

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

　　需要引用额外的源文件：angular-sanitize.js，还需要声明ngSanitize模块依赖。

三、条件化显示

　　四套指令集：ng-show/ng-hide,ng-switch-*,ng-if,ng-include

　　3.1 ng-show/ng-hide指令通过简单的应用style="display:none"来隐藏DOM元素，这些元素并不从DOM树种移除。

　　3.2 ng-switch和ng-if可以增加、移除DOM元素，ng-if使用更简单一点。

　　3.3 ng-include可以根据表达式的求值结果，有条件的加载和显示子模板。如：

<div ng-include="user.admin&&'edit.admin.html'||'edit.user.html'"></div>

　　这句话的意思是，如果user.admin为true，则返回的结果为edit.admin.html，第二个表达式edit.user.html就不会执行。最后的返回结果为edit.admin.html。如果user.admin为false，则第二句话就不会执行，则第一句和第二句整个就是false，返回结果就为第三句话，返回edit.user.html.

　　tips:&&第一个表达式为假就不会处理第二个表达式，||相反。

 四、ngRepeat指令

<table class="table">
    <tr ng-repeat="user in users">
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
    </tr>
</table>

　　4.1 特殊变量

　　AngularJS重复器在为每个独立条目创建作用域时，都会申明一组特殊变量，他们可用于确定此元素在集合中的位置。

　　$index:指代元素在集合中的索引数字（从0开始）。

　　$first、$middle、$last:这些变量会根据元素的位置获得对应的布尔值。