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:這些變量會根據元素的位置獲得對應的布爾值。