溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Angularjs中的視圖和指令介紹”，在日常操作中，相信很多人在Angularjs中的視圖和指令介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Angularjs中的視圖和指令介紹”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
在開始之前，讓我首先設置一個簡單的 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 視圖將模型中的數據混合到 HTML 模板中。您可以使用 AngularJS指令 來告訴 AngularJS 如何將數據混合到 HTML 模板中。本文將涵蓋最常用的 AngularJS 指令。
插值指令
插值指令是 AngujarJS 中最基本的指令之一。插值指令將表達式的結果插入到 HTML 模板中。您可以使用{{ }}符號標記插入表達式的位置。下面是一個例子：
<div ng-controller="MyController" >
<span> {{myData.text}} </span>
</div>HTML 模板包含在div具有ng-controller 屬性的元素中。HTML 模板內部是一個span元素，內部是一個插值指令。該指令指示 AngularJSmyData.text在給定位置插入數據值。
插值指令還可以插入從模型對象的函數返回的數據。下面是一個例子：
<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()上的函數$scope，并將從該函數返回的文本插入到 HTML 模板中。
該textf()函數被插入到$scope.myData控制器函數內的對象中，如您在示例中所見。
ng-bind 指令
該ng-bind指令是插值指令的替代。您可以通過ng-bind在您希望 AngularJS 插入數據的 HTML 元素中插入一個屬性來使用它。下面是一個例子：
<div ng-controller="MyController" > <span ng-bind="myData.textf()"></span> </div>
這會將myData.text()函數返回的數據插入到span元素的主體中。請注意屬性{{ }}內的表達式周圍的 不是必需的ng-bind。
如果從模型獲得的數據包含 HTML 元素，則這些元素在插入 HTML 模板之前會被轉義。轉義意味著 HTML 顯示為文本，而不是 HTML。
這樣做是為了防止 HTML 注入攻擊。例如，在聊天應用程序中，有人可能會<script>在聊天消息中插入帶有 JavaScript的元素。如果此元素未轉義，則任何看到聊天消息的人都可能會<script>執行該 元素。隨著 HTML 轉義，<script> 元素將僅顯示為文本。
您可以使用ng-bind-html-unsafe指令禁用 HTML 轉義，如下所示：
<div ng-controller="MyController" > <span ng-bind-html-unsafe="myData.textf()"></span> </div>
在禁用 HTML 轉義時，您應該非常小心。確保沒有顯示不受信任的 HTML。
AngularJS 可以根據模型中數據的狀態顯示或隱藏 HTML。您可以使用一組專門為此目的創建的 AngularJS 指令。我將在以下部分中介紹這些指令。
ng-show + ng-hide 指令
的ng-show和ng-hide指令用于顯示或隱藏根據模型中的數據的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>此示例創建兩個span元素。一個有一個ng-show指令，另一個有一個ng-hide指令。這兩個指令都查看myData.showIt 布爾變量以確定它們是否應該顯示或隱藏span元素。該ng-show 指令將顯示元素如果模型值為true，并隱藏元素如果模型值為false。該ng-hide指令將執行相反的操作：span如果模型值為 true，則隱藏元素，如果模型值為 false，則顯示它。
注意控制器函數如何將 設置myData.showIt為true。這意味著上面的示例將顯示第一個 span 元素并隱藏第二個。
HTML 元素（span在本例中為元素）使用 CSS 屬性隱藏display: none;。這意味著 HTML 元素仍然存在于 DOM 中。它們只是不可見。
ng-switch 指令
ng-switch如果您想根據模型中的數據從 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屬性指示要打開模型中的哪些數據。
div元素 內部是三個嵌套div元素。前兩個嵌套div元素包含一個ng-switch-when屬性。該屬性的值告訴on父屬性中引用的模型數據div應該具有什么值，以便嵌套div可見。在此示例中，第一個嵌套div在myData.switch為 1時可見，第二個嵌套div在myData.switch為 2時可見。
該third嵌套div有一個ng-switch-default屬性。如果沒有其他ng-switch-when指令匹配，則顯示div withng-switch-default屬性。
在上面的示例中，控制器函數設置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+ 之間的主要區別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 模板內。注意文件名是如何引用的（單引號）。
您可以根據條件包含 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監視用于生成 HTML 的項目的更改。如果項目發生變化，該ng-repeat指令可能會相應地更新 HTML。這包括重新排序和刪除 DOM 節點。
這是一個簡單的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>此示例將為數組中的li每個項目創建一個元素myData.items。
您還可以迭代從函數調用返回的集合。下面是一個例子：
<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 參數將被綁定到的屬性名稱和value參數將被綁定到的屬性值。該name和value參數可以輸出到HTML模板，就像任何其他JavaScript變量或對象的屬性，你可以從上面的HTML模板見。
特殊的 ng-repeat 變量
該ng-repeat指令定義了一組特殊變量，您可以在迭代集合時使用這些變量。這些變量是：
$index
$first
$中
$last
該$index變量包含被迭代元素的索引。
的$first，$middle并且$last包含根據當前的項目是否正在迭代集合中的第一，中間或最后一個元素的布爾值。如果一個項目既不是第一個也不是最后一個，它就是“中間”。您可以使用這些變量使用例如生成不同的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。
上面介紹的一些指令支持過濾。本節將解釋過濾的工作原理。
該ng-repeat指令可以接受這樣的過濾器：
<div ng-repeat="item in myData.items | filter: itemFilter"></div>
注意| filter: itemFilter上面聲明的部分。那部分是過濾器定義。該| filter:部分告訴 AngularJS 將過濾器應用于 myData.items數組。該itemFilter是過濾函數的名稱。此函數必須存在于$scope對象上，并且必須返回 true 或 false。如果過濾器函數返回 true，則ng-repeat指令使用數組中的元素。如果過濾器函數返回 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 | 根據給定的日期格式將變量格式化為日期 |
currency | 將變量格式化為帶有貨幣符號的數字 |
number | 將變量格式化為數字 |
lowercase | 將變量轉換為小寫 |
uppercase | 將變量轉換為大寫 |
json | 將變量轉換為 JSON 字符串 |
這是一個日期過濾器示例：
<span>{{myData.theDate | date: 'dd-MM-yyyy'}}</span>此示例顯示了date可以根據| date: 部分后給出的日期格式模式格式化 JavaScript 日期對象的過濾器。它是myData.theDate 將被格式化為日期的屬性。因此，它必須是一個 JavaScript 日期對象。
這是一個數字過濾器示例：
<span>{{myData.theNumber | number: 2}}</span>此示例將myData.theNumber變量格式化為帶有 2 個小數位的數字。
下面是一個小寫和大寫過濾器示例：
<span>{{myData.mixedCaseText | lowercase}}</span>
<span>{{myData.mixedCaseText | uppercase}}</span>數組過濾器
AngularJS 還包含一組過濾或轉換數組的數組過濾器。這些過濾器是：
數組過濾器：
| 過濾器 | 說明 |
|---|---|
limitTo | 將數組限制為給定的大小，從數組中的某個索引開始。該limitTo過濾器也適用于字符串。 |
filter | 通用過濾器。 |
orderBy | 根據提供的條件對數組進行排序。 |
下面是一個limitTo例子：
<span>{{myData.theText | limitTo: 3}}</span>這將$scope myData.theText變量限制為 3 個字符的長度。如果將此過濾器應用于數組，則該數組將被限制為 3 個元素。
該filter過濾器是一種特殊的過濾器，可以做很多不同的事情。在最簡單的形式中，它只是調用$scope對象上的函數。此函數必須返回trueor false。如果過濾器接受傳遞給它的值，則返回 True。如果過濾器不能接受該值，則返回 False。如果過濾器不能接受該值，則該值不包含在過濾產生的數組中。下面是一個例子：
<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值為的屬性的項目 的函數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變量作為參數。在此示例中，該變量名為sortField。此變量的值是已排序數據對象的屬性名稱，用于對數據對象進行排序。在此示例中，sortField 屬性設置為text這意味著數據對象的text屬性用于對數據對象進行排序。
該orderBy過濾器還可以采取的第二$scope變量作為參數。在此示例中，該變量名為reverse。該變量的值決定了數據對象是按自然順序排序，還是按自然順序排序。在這種情況下，reverse變量設置為true，這意味著數據對象將按相反順序排序。
鏈接過濾器
可以通過簡單地在過濾器部分中一個接一個地放置更多過濾器來鏈接過濾器。鏈接過濾器時，一個過濾器的輸出用作鏈中下一個過濾器的輸入。下面是一個例子：
<span>{{myData.theText | limitTo: 5 | uppercase}}</span>此示例首先myData.theText使用limitTo過濾器將字符串限制為 5 個字符，然后使用 過濾器將 5 個字符轉換為大寫uppercase 。
將過濾器輸出分配給變量
可以將過濾器的輸出分配給一個臨時變量，然后您可以稍后在視圖中引用該變量。下面是一個例子：
<ol>
<li ng-repeat="item in filteredItems = ( myData.items | filter:filterArray) ">
{{item.text}} : {{$first}}, {{$middle}}, {{$last}}
</li>
</ol>
<div>{{filteredItems.length}}</div>此示例將過濾的輸出分配給filteredItems變量。該示例然后{{ }}在ol元素下的指令內引用此變量。
實現自定義過濾器
如果 AngularJS 過濾器不適合您的需要，您可以實現自己的過濾器。下面是一個例子：
<div>Filtered: {{myData.text | myFilter}}</div>
<script>
var module = angular.module("myapp", []);
module.filter('myFilter', function() {
return function(stringValue) {
return stringValue.substring(0,3);
};
});
</script>此示例向 AngularJS 注冊了一個過濾器，它可以過濾字符串。過濾器返回字符串的前 3 個字符。過濾器以 name 注冊myFilter。正如您在過濾器開頭看到的那樣，您在引用過濾器時必須使用該名稱。
如果您的過濾器需要更多的輸入參數，請在過濾器函數中添加更多參數，并在過濾器名稱和:引用它時添加參數。下面是一個例子：
<div>Filtered: {{myData.text | myFilter :2:5}}</div>
<script>
var module = angular.module("myapp", []);
module.filter('myFilter', function() {
return function(stringValue, startIndex, endIndex) {
return stringValue.substring(parseInt(startIndex), parseInt(endIndex));
};
});
</script>注意過濾器引用 ( | myfilter:2:5) 現在在過濾器名稱后面有兩個值，每個值用冒號分隔。這兩個值作為參數傳遞給過濾器。還要注意 filter 函數現在如何接受兩個名為startIndex和 的額外參數endIndex。這兩個參數用于確定字符串的哪一部分作為子字符串從過濾器返回
到此，關于“Angularjs中的視圖和指令介紹”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
