angular js 經常使用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？

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

1、背景介紹

指令是一個Dom元素上的標籤(和元素上的屬性, CSS 類樣式同樣，屬於這個Dom元素)， 它告訴AngualrJS的HTML 編譯器，去附加一個行爲到這個Dom元素上去， 這個行爲能夠改變這個Dom元素，或者這個Dom元素的子元素。

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

2、知識剖析

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能夠觸發多個操做

3、常見問題

ng-option表達式的寫法

4、解決方案

NG-OPTION表達式的寫法
一、數組做爲數據源
用數組中的值作標籤。(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)

二、對象做爲數據源
用對象的鍵-值（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元素。

5、編碼實戰

騰訊視頻

6、拓展思考

7、參考文獻

ng-class用法

angular之ng-value指令

ng-select和ng-options

8、更多討論

用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