大家好，我是IT修真院鄭州分院第七期的學員馮亞超，一枚正直純潔善良的WEB程序員 今天給大家分享一下，題目angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？

一、背景介紹

指令是一個Dom元素上的標簽(和元素上的屬性, CSS 類樣式一樣，屬于這個Dom元素)， 它告訴AngualrJS的HTML 編譯器，去附加一個行為到這個Dom元素上去， 這個行為可以改變這個Dom元素，或者這個Dom元素的子元素。

AngularJS 通過被稱為 指令 的新屬性來擴展 HTML。AngularJS 通過內置的指令來為應用添加功能。 AngularJS 內置指令是擴展的 HTML 屬性，帶有前綴 ng-。

二、知識剖析

ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？

NG-IF
ng-if 指令用于在表達式為 false 時移除 HTML 元素。
如果 ng-if 語句執行的結果為 true，會添加HTML元素，并顯示。
ng-if 指令不同于 ng-hide/ng-show， ng-hide/ng-show是隱藏元素,設置元素的 display 為 none。而 ng-if 是從 DOM 中移除元素。
ng-hide 指令在表達式為 true 時隱藏指定的 HTML 元素。

ng-show 指令在表達式為 true 時顯示指定的 HTML 元素。

NG-CLASS
ng-class 指令用于給 HTML 元素動態綁定一個或多個 CSS 類。
ng-class 指令的值可以是字符串，對象，或一個數組。
如果是字符串，多個類名使用空格分隔。
如果是對象，需要使用 key-value 對，key 為你想要添加的類名，value 是一個布爾值。只有在 value 為 true 時類才會被添加。
如果是數組，可以由字符串或對象組合組成，數組的元素可以是字符串或對象。

NG-OPTION
ng-options 指令用于使用options填充select元素的選項。

ng-options屬性可以在表達式中使用數組或對象來自動生成一個select中的option列表。 ng-options與ng-repeat很相似，很多時候可以用ng-repeat來代替ng-options。 但是ng-options提供了一些好處，例如減少內存提高速度，以及提供選擇框的選項來讓用戶選擇。

NG-VALUE
ng-value 指令用于設置 input 或 select 元素的 value 屬性。和value相比，它的值可以是表達式，所以相比之下可以實現更多需求。

比如當需要使用ng-repeat來動態生成input[]的時候，ngValue是很有用處的。

NG-CLICK
ng-click 指令告訴了 AngularJS HTML 元素被點擊后需要執行的操作。
如果是使用ng-click來實現函數的執行的話，還可以進行傳參。

一個ng-click可以觸發多個操作

三、常見問題

ng-option表達式的寫法

四、解決方案

NG-OPTION表達式的寫法
1、數組作為數據源
用數組中的值做標簽。(label for value in array)
用數組中的值作為選中的標簽。(select as label for value in array)
用數組中的值做標簽組。(label group by group for value in array)

用數組中的值作為選中的標簽組。(select as label group by group for value in array track by trackexpr)

2、對象作為數據源
用對象的鍵-值（key-value）做標簽。(label for (key , value) in object)
用對象的鍵-值作為選中的標簽。(select as label for (key , value) in object)
用對象的鍵-值作為標簽組。(label group by group for (key, value) in object)

用對象的鍵-值作為選中的標簽組。(select as label group by group for (key, value) in ob)

ng-options的值可以是一個內涵表達式（comprehension expression）， 其實這只是一種有趣的說法，簡單來說就是它可以接收一個數組或者對象， 并對它們進行循環，將內部的內容提供給select標簽內部的選項。ng-options屬性可用于使用通過評估理解表達式獲得的數組或對象來動態生成option 元素的select元素。

五、編碼實戰

騰訊視頻

六、拓展思考

七、參考文獻

ng-class用法

angular之ng-value指令

ng-select和ng-options

八、更多討論

用angularJS的ng-model綁定到select上，會自動增加一個value為空的option,這是為什么？

原因：ng-model沒有初始化導致的， 如果ng-model所綁定的變量的值在ng-options綁定的value里面有， 下拉選框中就不會有空白的一項，選中別的數據項以后消失； 如果ng-model所綁定的變量的值不在ng-options綁定的value里面， 下拉選框中就不會有空白一項,并且只有當ng-options綁定的value里有對應 的text為空行時，這個空行才會一直存在于下拉選項里。

解決辦法
方法一：將select中的一個option設置為空，就可以防止因添加ng-model自動添加空option的問題
方法二：自己預先添加一個value為空的option，再用ng-if="false"把它去掉

PPT

總結

以上是生活随笔為你收集整理的angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。