ANGULAR JS經常使用指令NG-IF、NG-CLASS、NG-OPTION、NG-VALUE、NG-CLICK是如何使用的？

ANGULAR JS經常使用指令NG-IF、NG-CLASS、NG-OPTION、NG-VALUE、NG-CLICK是如何使用的？

目錄

1.背景介紹

2.知識剖析

3.常見問題

4.解決方案

5.編碼實戰

6.擴展思考

7.參考文獻

8.更多討論

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

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

2.知識剖析 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能夠觸發多個操做， 先執行function1後執行function2。

3.常見問題 ng-option表達式的寫法 4.解決方案 一、ng-option表達式的寫法 ng-options的值能夠是一個內涵表達式， 其實這只是一種有趣的說法，簡單來講就是它能夠接收一個數組或者對象， 並對它們進行循環，將內部的內容提供給select標籤內部的選項。

它能夠是如下兩種形式。

一、數組做爲數據源 用數組中的值作標籤。 用數組中的值做爲選中的標籤。用數組中的值作標籤組。 用數組中的值做爲選中的標籤組。

二、對象做爲數據源 用對象的鍵-值（key-value）作標籤。用對象的鍵-值做爲選中的標籤。用對象的鍵-值做爲標籤組。 用對象的鍵-值做爲選中的標籤組。

5.代碼實戰 demo 6.拓展思考 用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的問題

7.參考文獻 參考一:菜鳥教程-Angular指令篇

8.更多討論 鳴謝 感謝你們觀看

今天的分享就到這裏啦，歡迎你們點贊、轉發、留言、拍磚~

技能樹.IT修真院

「咱們相信人人均可以成爲一個工程師，如今開始，找個師兄，帶你入門，掌控本身學習的節奏，學習的路上再也不迷茫」。

這裏是技能樹.IT修真院，成千上萬的師兄在這裏找到了本身的學習路線，學習透明化，成長可見化，師兄1對1免費指導。

快來與我一塊兒學習吧~http://www.jnshu.com/login/1/21109035