Angularjs中的視圖和指令介紹

這篇文章主要介紹“Angularjs中的視圖和指令介紹”，在日常操作中，相信很多人在Angularjs中的視圖和指令介紹問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Angularjs中的視圖和指令介紹”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序設(shè)計(jì)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了樺川免費(fèi)建站歡迎大家使用！

AngularJS 視圖和指令介紹

在開(kāi)始之前，讓我首先設(shè)置一個(gè)簡(jiǎn)單的 AngularJS 應(yīng)用程序，您可以使用它來(lái)體驗(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指令來(lái)告訴 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ì)象中，如您在示例中所見(jiàn)。

ng-bind 指令

該ng-bind指令是插值指令的替代。您可以通過(guò)ng-bind在您希望 AngularJS 插入數(shù)據(jù)的 HTML 元素中插入一個(gè)屬性來(lái)使用它。下面是一個(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)該非常小心。確保沒(méi)有顯示不受信任的 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 中。它們只是不可見(jiàn)。

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屬性指示要打開(kāi)模型中的哪些數(shù)據(jù)。

div元素內(nèi)部是三個(gè)嵌套div元素。前兩個(gè)嵌套div元素包含一個(gè)ng-switch-when屬性。該屬性的值告訴on父屬性中引用的模型數(shù)據(jù)div應(yīng)該具有什么值，以便嵌套div可見(jiàn)。在此示例中，第一個(gè)嵌套div在myData.switch為 1時(shí)可見(jiàn)，第二個(gè)嵌套div在myData.switch為 2時(shí)可見(jiàn)。

該third嵌套div有一個(gè)ng-switch-default屬性。如果沒(méi)有其他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è)簡(jiǎn)單的語(yǔ)法。下面是一個(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指令可用于將來(lái)自其他文件的 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è)簡(jiǎn)單的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>

您可以使用稍微不同的語(yǔ)法迭代 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模板見(jiàn)。

特殊的 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)記開(kāi)始和結(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。

過(guò)濾

上面介紹的一些指令支持過(guò)濾。本節(jié)將解釋過(guò)濾的工作原理。

該ng-repeat指令可以接受這樣的過(guò)濾器：

<div ng-repeat="item in myData.items | filter: itemFilter"></div>

注意| filter: itemFilter上面聲明的部分。那部分是過(guò)濾器定義。該| filter:部分告訴 AngularJS 將過(guò)濾器應(yīng)用于 myData.items數(shù)組。該itemFilter是過(guò)濾函數(shù)的名稱。此函數(shù)必須存在于$scope對(duì)象上，并且必須返回 true 或 false。如果過(guò)濾器函數(shù)返回 true，則ng-repeat指令使用數(shù)組中的元素。如果過(guò)濾器函數(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>

格式化過(guò)濾器

AngularJS 帶有一組內(nèi)置格式過(guò)濾器，可以與插值指令和ng-bind. 以下是格式過(guò)濾器的列表：

過(guò)濾器	說(shuō)明
`date`	根據(jù)給定的日期格式將變量格式化為日期
`currency`	將變量格式化為帶有貨幣符號(hào)的數(shù)字
`number`	將變量格式化為數(shù)字
`lowercase`	將變量轉(zhuǎn)換為小寫
`uppercase`	將變量轉(zhuǎn)換為大寫
`json`	將變量轉(zhuǎn)換為 JSON 字符串

這是一個(gè)日期過(guò)濾器示例：

<span>{{myData.theDate | date: 'dd-MM-yyyy'}}</span>

此示例顯示了date可以根據(jù)| date: 部分后給出的日期格式模式格式化 JavaScript 日期對(duì)象的過(guò)濾器。它是myData.theDate 將被格式化為日期的屬性。因此，它必須是一個(gè) JavaScript 日期對(duì)象。

這是一個(gè)數(shù)字過(guò)濾器示例：

<span>{{myData.theNumber | number: 2}}</span>

此示例將myData.theNumber變量格式化為帶有 2 個(gè)小數(shù)位的數(shù)字。

下面是一個(gè)小寫和大寫過(guò)濾器示例：

<span>{{myData.mixedCaseText | lowercase}}</span>
<span>{{myData.mixedCaseText | uppercase}}</span>

數(shù)組過(guò)濾器

AngularJS 還包含一組過(guò)濾或轉(zhuǎn)換數(shù)組的數(shù)組過(guò)濾器。這些過(guò)濾器是：

數(shù)組過(guò)濾器：

過(guò)濾器	說(shuō)明
`limitTo`	將數(shù)組限制為給定的大小，從數(shù)組中的某個(gè)索引開(kāi)始。該`limitTo`過(guò)濾器也適用于字符串。
`filter`	通用過(guò)濾器。
`orderBy`	根據(jù)提供的條件對(duì)數(shù)組進(jìn)行排序。

下面是一個(gè)limitTo例子：

<span>{{myData.theText | limitTo: 3}}</span>

這將$scope myData.theText變量限制為 3 個(gè)字符的長(zhǎng)度。如果將此過(guò)濾器應(yīng)用于數(shù)組，則該數(shù)組將被限制為 3 個(gè)元素。

該filter過(guò)濾器是一種特殊的過(guò)濾器，可以做很多不同的事情。在最簡(jiǎn)單的形式中，它只是調(diào)用$scope對(duì)象上的函數(shù)。此函數(shù)必須返回trueor false。如果過(guò)濾器接受傳遞給它的值，則返回 True。如果過(guò)濾器不能接受該值，則返回 False。如果過(guò)濾器不能接受該值，則該值不包含在過(guò)濾產(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()過(guò)濾掉具有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過(guò)濾器可以接受一個(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過(guò)濾器還可以采取的第二$scope變量作為參數(shù)。在此示例中，該變量名為reverse。該變量的值決定了數(shù)據(jù)對(duì)象是按自然順序排序，還是按自然順序排序。在這種情況下，reverse變量設(shè)置為true，這意味著數(shù)據(jù)對(duì)象將按相反順序排序。

鏈接過(guò)濾器

可以通過(guò)簡(jiǎn)單地在過(guò)濾器部分中一個(gè)接一個(gè)地放置更多過(guò)濾器來(lái)鏈接過(guò)濾器。鏈接過(guò)濾器時(shí)，一個(gè)過(guò)濾器的輸出用作鏈中下一個(gè)過(guò)濾器的輸入。下面是一個(gè)例子：

<span>{{myData.theText | limitTo: 5 | uppercase}}</span>

此示例首先myData.theText使用limitTo過(guò)濾器將字符串限制為 5 個(gè)字符，然后使用過(guò)濾器將 5 個(gè)字符轉(zhuǎn)換為大寫uppercase 。

將過(guò)濾器輸出分配給變量

可以將過(guò)濾器的輸出分配給一個(gè)臨時(shí)變量，然后您可以稍后在視圖中引用該變量。下面是一個(gè)例子：

<ol>
    <li ng-repeat="item in filteredItems = ( myData.items | filter:filterArray) ">
        {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
    </li>
</ol>
<div>{{filteredItems.length}}</div>

此示例將過(guò)濾的輸出分配給filteredItems變量。該示例然后{{ }}在ol元素下的指令內(nèi)引用此變量。

實(shí)現(xiàn)自定義過(guò)濾器

如果 AngularJS 過(guò)濾器不適合您的需要，您可以實(shí)現(xiàn)自己的過(guò)濾器。下面是一個(gè)例子：

<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 注冊(cè)了一個(gè)過(guò)濾器，它可以過(guò)濾字符串。過(guò)濾器返回字符串的前 3 個(gè)字符。過(guò)濾器以 name 注冊(cè)myFilter。正如您在過(guò)濾器開(kāi)頭看到的那樣，您在引用過(guò)濾器時(shí)必須使用該名稱。

如果您的過(guò)濾器需要更多的輸入?yún)?shù)，請(qǐng)?jiān)谶^(guò)濾器函數(shù)中添加更多參數(shù)，并在過(guò)濾器名稱和:引用它時(shí)添加參數(shù)。下面是一個(gè)例子：

<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>

注意過(guò)濾器引用 ( | myfilter:2:5) 現(xiàn)在在過(guò)濾器名稱后面有兩個(gè)值，每個(gè)值用冒號(hào)分隔。這兩個(gè)值作為參數(shù)傳遞給過(guò)濾器。還要注意 filter 函數(shù)現(xiàn)在如何接受兩個(gè)名為startIndex和的額外參數(shù)endIndex。這兩個(gè)參數(shù)用于確定字符串的哪一部分作為子字符串從過(guò)濾器返回

到此，關(guān)于“Angularjs中的視圖和指令介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

網(wǎng)頁(yè)標(biāo)題：Angularjs中的視圖和指令介紹
URL網(wǎng)址：http://bm7419.com/article32/gihepc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站改版、ChatGPT、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站制作、域名注冊(cè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容