站長資訊網(wǎng)本篇文章帶大家了解一下Angularjs中的視圖和指令，希望對(duì)大家有所幫助！
AngularJS 視圖和指令介紹
在第一篇文章中您看到了 AngularJS 如何將應(yīng)用程序拆分為視圖、控制器和模型 (MVC)。本文將深入探討如何創(chuàng)建 AngularJS 視圖?！鞠嚓P(guān)教程推薦：《angular教程》】
在開始之前，讓我首先設(shè)置一個(gè)簡單的 AngularJS 應(yīng)用程序，您可以使用它來體驗(yàn)本文中的示例：
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body ng-app="myapp"> <div ng-controller="MyController" > <span></span> </div> <script> angular.module("myapp", []) .controller("MyController", function($scope) { //empty controller function }); </script> </body> </html>
AngularJS 指令
AngularJS 視圖將模型中的數(shù)據(jù)混合到 HTML 模板中。您可以使用 AngularJS指令 來告訴 AngularJS 如何將數(shù)據(jù)混合到 HTML 模板中。本文將涵蓋最常用的 AngularJS 指令。
插值指令
插值指令是 AngujarJS 中最基本的指令之一。插值指令將表達(dá)式的結(jié)果插入到 HTML 模板中。您可以使用{{ }}符號(hào)標(biāo)記插入表達(dá)式的位置。下面是一個(gè)例子：
<div ng-controller="MyController" > <span> {{myData.text}} </span> </div>
HTML 模板包含在div具有ng-controller 屬性的元素中。HTML 模板內(nèi)部是一個(gè)span元素，內(nèi)部是一個(gè)插值指令。該指令指示 AngularJSmyData.text在給定位置插入數(shù)據(jù)值。
插值指令還可以插入從模型對(duì)象的函數(shù)返回的數(shù)據(jù)。下面是一個(gè)例子：
<div ng-controller="MyController" > <span>{{myData.textf()}}</span> </div> <script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myData = {}; $scope.myData.textf = function() { return "A text from a function"; }; }); </script>
在此示例中，插值指令{{myData.textf()}}將調(diào)用模型對(duì)象myData.textf()上的函數(shù)$scope，并將從該函數(shù)返回的文本插入到 HTML 模板中。
該textf()函數(shù)被插入到$scope.myData控制器函數(shù)內(nèi)的對(duì)象中，如您在示例中所見。
ng-bind 指令
該ng-bind指令是插值指令的替代。您可以通過ng-bind在您希望 AngularJS 插入數(shù)據(jù)的 HTML 元素中插入一個(gè)屬性來使用它。下面是一個(gè)例子：
<div ng-controller="MyController" > <span ng-bind="myData.textf()"></span> </div>
這會(huì)將myData.text()函數(shù)返回的數(shù)據(jù)插入到span元素的主體中。請(qǐng)注意屬性{{ }}內(nèi)的表達(dá)式周圍的 不是必需的ng-bind。
從模型中轉(zhuǎn)義 HTML
如果從模型獲得的數(shù)據(jù)包含 HTML 元素，則這些元素在插入 HTML 模板之前會(huì)被轉(zhuǎn)義。轉(zhuǎn)義意味著 HTML 顯示為文本，而不是 HTML。
這樣做是為了防止 HTML 注入攻擊。例如，在聊天應(yīng)用程序中，有人可能會(huì)<script>在聊天消息中插入帶有 JavaScript的元素。如果此元素未轉(zhuǎn)義，則任何看到聊天消息的人都可能會(huì)<script>執(zhí)行該 元素。隨著 HTML 轉(zhuǎn)義，<script> 元素將僅顯示為文本。
您可以使用ng-bind-html-unsafe指令禁用 HTML 轉(zhuǎn)義，如下所示：
<div ng-controller="MyController" > <span ng-bind-html-unsafe="myData.textf()"></span> </div>
在禁用 HTML 轉(zhuǎn)義時(shí)，您應(yīng)該非常小心。確保沒有顯示不受信任的 HTML。
條件渲染
AngularJS 可以根據(jù)模型中數(shù)據(jù)的狀態(tài)顯示或隱藏 HTML。您可以使用一組專門為此目的創(chuàng)建的 AngularJS 指令。我將在以下部分中介紹這些指令。
ng-show + ng-hide 指令
的ng-show和ng-hide指令用于顯示或隱藏根據(jù)模型中的數(shù)據(jù)的HTML元素。這兩個(gè)指令做同樣的事情，但彼此相反。這里有兩個(gè)例子：
<div ng-controller="MyController" > <span ng-show="myData.showIt"></span> <span ng-hide="myData.showIt"></span> </div> <script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myData = {}; $scope.myData.showIt = true; }); </script>
此示例創(chuàng)建兩個(gè)span元素。一個(gè)有一個(gè)ng-show指令，另一個(gè)有一個(gè)ng-hide指令。這兩個(gè)指令都查看myData.showIt 布爾變量以確定它們是否應(yīng)該顯示或隱藏span元素。該ng-show 指令將顯示元素如果模型值為true，并隱藏元素如果模型值為false。該ng-hide指令將執(zhí)行相反的操作：span如果模型值為 true，則隱藏元素，如果模型值為 false，則顯示它。
注意控制器函數(shù)如何將 設(shè)置myData.showIt為true。這意味著上面的示例將顯示第一個(gè) span 元素并隱藏第二個(gè)。
HTML 元素（span在本例中為元素）使用 CSS 屬性隱藏display: none;。這意味著 HTML 元素仍然存在于 DOM 中。它們只是不可見。
ng-switch 指令
ng-switch如果您想根據(jù)模型中的數(shù)據(jù)從 DOM 中添加或刪除 HTML 元素，則使用 該指令。下面是一個(gè)例子：
<div ng-controller="MyController" > <div ng-switch on="myData.switch"> <div ng-switch-when="1">Shown when switch is 1</div> <div ng-switch-when="2">Shown when switch is 2</div> <div ng-switch-default>Shown when switch is anything else than 1 and 2</div> </div> </div> <script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myData = {}; $scope.myData.switch = 3; }); </script>
此示例包含一個(gè)div具有ng-switch屬性和on屬性的元素。該on屬性指示要打開模型中的哪些數(shù)據(jù)。
div元素 內(nèi)部是三個(gè)嵌套div元素。前兩個(gè)嵌套div元素包含一個(gè)ng-switch-when屬性。該屬性的值告訴on父屬性中引用的模型數(shù)據(jù)div應(yīng)該具有什么值，以便嵌套div可見。在此示例中，第一個(gè)嵌套div在myData.switch為 1時(shí)可見，第二個(gè)嵌套div在myData.switch為 2時(shí)可見。
該third嵌套div有一個(gè)ng-switch-default屬性。如果沒有其他ng-switch-when指令匹配，則顯示div withng-switch-default屬性。
在上面的示例中，控制器函數(shù)設(shè)置myData.switch為 3。這意味著將顯示嵌套div的ng-switch-default屬性。另外兩個(gè)嵌套div元素將從 DOM 中完全刪除。
ng-if 指令
該ng-if指令可以包括/從DOM刪除HTML元素，就像ng-switch指令，但它有一個(gè)簡單的語法。下面是一個(gè)例子：
<div ng-controller="MyController" > <div ng-if="myData.showIt">ng-if Show it</div> </div> <script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myData = {}; $scope.myData.showIt = true; }); </script>
ng-if和ng-show+ 之間的主要區(qū)別ng-hide是 ng-if從 DOM 中完全刪除 HTML 元素，而ng-show+ ng-hide只是將 CSS 屬性display: none;應(yīng)用于元素。
ng-include 指令
該ng-include指令可用于將來自其他文件的 HTML 片段包含到視圖的 HTML 模板中。下面是一個(gè)例子：
<div ng-controller="MyController" > <div ng-include="'angular-included-fragment.html'"></div> </div>
T此示例將文件包含angular-included-fragment.html到div具有ng-include屬性的 HTML 模板內(nèi)。注意文件名是如何引用的（單引號(hào)）。
您可以根據(jù)條件包含 HTML 片段。例如，您可以在兩個(gè)文件之間進(jìn)行選擇，如下所示：
<div ng-controller="MyController" > <div ng-include="myData.showIt && 'fragment-1.html' || 'fragment-2.html'"></div> </div> <script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myData = {}; $scope.myData.showIt = true; }); </script>
此示例將包括fragment-1.htmlifmyData.showIt為 true 和fragment-2.htmlifmyData.showIt為 false。
ng-repeat 指令
該ng-repeat指令用于迭代一組項(xiàng)目并從中生成 HTML。在初始生成之后，ng-repeat監(jiān)視用于生成 HTML 的項(xiàng)目的更改。如果項(xiàng)目發(fā)生變化，該ng-repeat指令可能會(huì)相應(yīng)地更新 HTML。這包括重新排序和刪除 DOM 節(jié)點(diǎn)。
這是一個(gè)簡單的ng-repeat例子：
<ol> <li ng-repeat="theItem in myData.items">{{theItem.text}}</li> </ol> <script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myData = {}; $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ]; }); </script>
此示例將為數(shù)組中的li每個(gè)項(xiàng)目創(chuàng)建一個(gè)元素myData.items。
您還可以迭代從函數(shù)調(diào)用返回的集合。下面是一個(gè)例子：
<ol> <li ng-repeat="theItem in myData.getItems()">{{theItem.text}}</li> </ol> <script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myData = {}; $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ]; $scope.myData.getItems = function() { return this.items; }; }); </script>
您可以使用稍微不同的語法迭代 JavaScript 對(duì)象的屬性：
<ol> <li ng-repeat="(name, value) in myData.myObject">{{name}} = {{value}}</li> </ol> <script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myData = {}; $scope.myData.myObject = { var1 : "val1", var2 : "val3", var3 : "val3"}; }); </script>
注意指令的(name, value)部分ng-repeat。這會(huì)通知 AngularJS 迭代對(duì)象的屬性。該name 參數(shù)將被綁定到的屬性名稱和value參數(shù)將被綁定到的屬性值。該name和value參數(shù)可以輸出到HTML模板，就像任何其他JavaScript變量或?qū)ο蟮膶傩?，你可以從上面的HTML模板見。
特殊的 ng-repeat 變量
該ng-repeat指令定義了一組特殊變量，您可以在迭代集合時(shí)使用這些變量。這些變量是：
- $index
- $first
- $中
- $last
該$index變量包含被迭代元素的索引。
的$first，$middle并且$last包含根據(jù)當(dāng)前的項(xiàng)目是否正在迭代集合中的第一，中間或最后一個(gè)元素的布爾值。如果一個(gè)項(xiàng)目既不是第一個(gè)也不是最后一個(gè)，它就是“中間”。您可以使用這些變量使用例如生成不同的HTML ng-show/ ng-hide，ng-switch， ng-if和ng-include指令如前所述。
重復(fù)多個(gè)元素
到目前為止，您只看到了如何使用ng-repeat. 如果您想重復(fù)多個(gè) HTML 元素，您必須將這些元素嵌套在容器元素中，并讓容器元素具有該ng-repeat 元素，如下所示：
<div ng-repeat="(name, value) in myData.myObject"> <div>{{name}}</li> <div>{{value}}</li> </div>
但是，將要重復(fù)的元素包裝在根元素中可能并不總是可行的。因此 AngularJS 有ng-repeat-start和ng-repeat-end指令，用于標(biāo)記開始和結(jié)束重復(fù)的元素。下面是一個(gè)例子：
<ol> <li ng-repeat-start="(name, value) in myData.myObject">{{name}}</li> <li ng-repeat-end>{{value}}</li> </ol>
此示例將為 中的li每個(gè)屬性重復(fù)這兩個(gè)元素 myData.myObject。
過濾
上面介紹的一些指令支持過濾。本節(jié)將解釋過濾的工作原理。
該ng-repeat指令可以接受這樣的過濾器：
<div ng-repeat="item in myData.items | filter: itemFilter"></div>
注意| filter: itemFilter上面聲明的部分。那部分是過濾器定義。該| filter:部分告訴 AngularJS 將過濾器應(yīng)用于 myData.items數(shù)組。該itemFilter是過濾函數(shù)的名稱。此函數(shù)必須存在于$scope對(duì)象上，并且必須返回 true 或 false。如果過濾器函數(shù)返回 true，則ng-repeat指令使用數(shù)組中的元素。如果過濾器函數(shù)返回 false，則忽略該元素。下面是一個(gè)例子：
<script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myData = {}; $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ]; $scope.itemFilter = function(item) { if(item.text == "two") return false; return true; } } }); </script>
格式化過濾器
AngularJS 帶有一組內(nèi)置格式過濾器，可以與插值指令和ng-bind. 以下是格式過濾器的列表：
| 過濾器 | 說明 |
|---|---|
date |
根據(jù)給定的日期格式將變量格式化為日期 |
currency |
將變量格式化為帶有貨幣符號(hào)的數(shù)字 |
number |
將變量格式化為數(shù)字 |
lowercase |
將變量轉(zhuǎn)換為小寫 |
uppercase |
將變量轉(zhuǎn)換為大寫 |
json |
將變量轉(zhuǎn)換為 JSON 字符串 |
這是一個(gè)日期過濾器示例：
<span>{{myData.theDate | date: 'dd-MM-yyyy'}}</span>
此示例顯示了date可以根據(jù)| date: 部分后給出的日期格式模式格式化 JavaScript 日期對(duì)象的過濾器。它是myData.theDate 將被格式化為日期的屬性。因此，它必須是一個(gè) JavaScript 日期對(duì)象。
這是一個(gè)數(shù)字過濾器示例：
<span>{{myData.theNumber | number: 2}}</span>
此示例將myData.theNumber變量格式化為帶有 2 個(gè)小數(shù)位的數(shù)字。
下面是一個(gè)小寫和大寫過濾器示例：
<span>{{myData.mixedCaseText | lowercase}}</span> <span>{{myData.mixedCaseText | uppercase}}</span>
數(shù)組過濾器
AngularJS 還包含一組過濾或轉(zhuǎn)換數(shù)組的數(shù)組過濾器。這些過濾器是：
數(shù)組過濾器：
| 過濾器 | 說明 |
|---|---|
limitTo |
將數(shù)組限制為給定的大小，從數(shù)組中的某個(gè)索引開始。該limitTo過濾器也適用于字符串。 |
filter |
通用過濾器。 |
orderBy |
根據(jù)提供的條件對(duì)數(shù)組進(jìn)行排序。 |
下面是一個(gè)limitTo例子：
<span>{{myData.theText | limitTo: 3}}</span>
這將$scope myData.theText變量限制為 3 個(gè)字符的長度。如果將此過濾器應(yīng)用于數(shù)組，則該數(shù)組將被限制為 3 個(gè)元素。
該filter過濾器是一種特殊的過濾器，可以做很多不同的事情。在最簡單的形式中，它只是調(diào)用$scope對(duì)象上的函數(shù)。此函數(shù)必須返回trueor false。如果過濾器接受傳遞給它的值，則返回 True。如果過濾器不能接受該值，則返回 False。如果過濾器不能接受該值，則該值不包含在過濾產(chǎn)生的數(shù)組中。下面是一個(gè)例子：
<ol> <li ng-repeat="item in myData.items | filter:filterArray"> {{item.text}} : {{$first}}, {{$middle}}, {{$last}} </li> </ol> <script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myData = {}; $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ]; $scope.filterArray = function(item) { if(item.text == "two") return false; return true; } } ); </script>
此示例調(diào)用filterArray()過濾掉具有text值為的屬性的項(xiàng)目 的函數(shù)two。
下面是一個(gè)orderBy例子：
<ol> <li ng-repeat="item in myData.items | orderBy:sortField:reverse"> {{item.text}} : {{$first}}, {{$middle}}, {{$last}} </li> </ol> <script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myData = {}; $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ]; $scope.sortField = "text"; $scope.reverse = true; } ); </script>
所述orderBy過濾器可以接受一個(gè)$scope變量作為參數(shù)。在此示例中，該變量名為sortField。此變量的值是已排序數(shù)據(jù)對(duì)象的屬性名稱，用于對(duì)數(shù)據(jù)對(duì)象進(jìn)行排序。在此示例中，sortField 屬性設(shè)置為text這意味著數(shù)據(jù)對(duì)象的text屬性用于對(duì)數(shù)據(jù)對(duì)象進(jìn)行排序。
該orderBy過濾器還可以采取的第二$scope變量作為參數(shù)。在此示例中，該變量名為reverse。該變量的值決定了數(shù)據(jù)對(duì)象是按自然順序排序，還是按自然順序排序。在這種情況下，reverse變量設(shè)置為true，這意味著數(shù)據(jù)對(duì)象將按相反順序排序。
鏈接過濾器
可以通過簡單地在過濾器部分中一個(gè)接一個(gè)地放置
