真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

     {{myData.text}} 

 
      {{myData.textf()}}
  

在此示例中，插值指令{{myData.textf()}}將調(diào)用模型對象myData.textf()上的函數(shù)$scope，并將從該函數(shù)返回的文本插入到 HTML 模板中。

該textf()函數(shù)被插入到$scope.myData控制器函數(shù)內(nèi)的對象中，如您在示例中所見。

ng-bind 指令

該ng-bind指令是插值指令的替代。您可以通過ng-bind在您希望 AngularJS 插入數(shù)據(jù)的 HTML 元素中插入一個(gè)屬性來使用它。下面是一個(gè)例子：

這會(huì)將myData.text()函數(shù)返回的數(shù)據(jù)插入到span元素的主體中。請注意屬性{{ }}內(nèi)的表達(dá)式周圍的 不是必需的ng-bind。

從模型中轉(zhuǎn)義 HTML

如果從模型獲得的數(shù)據(jù)包含 HTML 元素，則這些元素在插入 HTML 模板之前會(huì)被轉(zhuǎn)義。轉(zhuǎn)義意味著 HTML 顯示為文本，而不是 HTML。

這樣做是為了防止 HTML 注入攻擊。例如，在聊天應(yīng)用程序中，有人可能會(huì)

此示例創(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è)例子：

    
        Shown when switch is 1
        Shown when switch is 2
        Shown when switch is anything else than 1 and 2
    

此示例包含一個(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è)例子：

    ng-if Show it

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è)例子：

T此示例將文件包含angular-included-fragment.html到div具有ng-include屬性的 HTML 模板內(nèi)。注意文件名是如何引用的（單引號）。

您可以根據(jù)條件包含 HTML 片段。例如，您可以在兩個(gè)文件之間進(jìn)行選擇，如下所示：

此示例將包括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例子：

   {{theItem.text}}

此示例將為數(shù)組中的li每個(gè)項(xiàng)目創(chuàng)建一個(gè)元素myData.items。

您還可以迭代從函數(shù)調(diào)用返回的集合。下面是一個(gè)例子：

   {{theItem.text}}

您可以使用稍微不同的語法迭代 JavaScript 對象的屬性：

   {{name}} = {{value}}

注意指令的(name, value)部分ng-repeat。這會(huì)通知 AngularJS 迭代對象的屬性。該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 元素，如下所示：

   
{{name}}
   
{{value}}

但是，將要重復(fù)的元素包裝在根元素中可能并不總是可行的。因此 AngularJS 有ng-repeat-start和ng-repeat-end指令，用于標(biāo)記開始和結(jié)束重復(fù)的元素。下面是一個(gè)例子：

    {{name}}
    {{value}}

此示例將為 中的li每個(gè)屬性重復(fù)這兩個(gè)元素 myData.myObject。

過濾

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

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

注意| filter: itemFilter上面聲明的部分。那部分是過濾器定義。該| filter:部分告訴 AngularJS 將過濾器應(yīng)用于 myData.items數(shù)組。該itemFilter是過濾函數(shù)的名稱。此函數(shù)必須存在于$scope對象上，并且必須返回 true 或 false。如果過濾器函數(shù)返回 true，則ng-repeat指令使用數(shù)組中的元素。如果過濾器函數(shù)返回 false，則忽略該元素。下面是一個(gè)例子：

格式化過濾器

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

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

{{myData.theDate | date: 'dd-MM-yyyy'}}

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

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

{{myData.theNumber | number: 2}}

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

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

{{myData.mixedCaseText | lowercase}}
{{myData.mixedCaseText | uppercase}}

數(shù)組過濾器

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

數(shù)組過濾器：

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

{{myData.theText | limitTo: 3}}

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

該filter過濾器是一種特殊的過濾器，可以做很多不同的事情。在最簡單的形式中，它只是調(diào)用$scope對象上的函數(shù)。此函數(shù)必須返回trueor false。如果過濾器接受傳遞給它的值，則返回 True。如果過濾器不能接受該值，則返回 False。如果過濾器不能接受該值，則該值不包含在過濾產(chǎn)生的數(shù)組中。下面是一個(gè)例子：

    
        {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
    

此示例調(diào)用filterArray()過濾掉具有text值為的屬性的項(xiàng)目 的函數(shù)two。

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

    
        {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
    

    

所述orderBy過濾器可以接受一個(gè)$scope變量作為參數(shù)。在此示例中，該變量名為sortField。此變量的值是已排序數(shù)據(jù)對象的屬性名稱，用于對數(shù)據(jù)對象進(jìn)行排序。在此示例中，sortField 屬性設(shè)置為text這意味著數(shù)據(jù)對象的text屬性用于對數(shù)據(jù)對象進(jìn)行排序。

該orderBy過濾器還可以采取的第二$scope變量作為參數(shù)。在此示例中，該變量名為reverse。該變量的值決定了數(shù)據(jù)對象是按自然順序排序，還是按自然順序排序。在這種情況下，reverse變量設(shè)置為true，這意味著數(shù)據(jù)對象將按相反順序排序。

鏈接過濾器

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

{{myData.theText | limitTo: 5 | uppercase}}

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

將過濾器輸出分配給變量

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

    
        {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
    

{{filteredItems.length}}

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

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

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

Filtered: {{myData.text | myFilter}}

    
    

此示例向 AngularJS 注冊了一個(gè)過濾器，它可以過濾字符串。過濾器返回字符串的前 3 個(gè)字符。過濾器以 name 注冊myFilter。正如您在過濾器開頭看到的那樣，您在引用過濾器時(shí)必須使用該名稱。

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

Filtered: {{myData.text | myFilter :2:5}}

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

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