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