Angularjs學習筆記（五）----顯示和格式化數據

1、引用指令

　　在AngularJS的文檔中，全部指令的名字以駝峯命名法。而在模板中，則須要以蛇形命名法。能夠以冒號分割（ng：model）或下劃線分割（ng_model），更常見的是以ng-model這種樣式命名。若是是HTML5，前面能夠加上data，如data-ng-model。

2、插值指令

　　用花括號界定的表達式，如：

<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模塊依賴。

3、條件化顯示

　　四套指令集：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:&&第一個表達式爲假就不會處理第二個表達式，||相反。

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