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

你們好，我是IT修真院武漢分院第12期學員，一枚正直善良的web程序員。

今天給你們分享一下，修真院官網JS8任務中可能會使用到的知識點：

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

1.背景介紹
AngularJS 經過被稱爲"指令(directive)"的新屬性來擴展 HTML。

AngularJS 有許多內置的指令來爲應用添加功能

通俗點說就是 AngularJS 將指令與DOM綁定在一塊兒，再擴展指令的行爲，最後實現修改HTML的功能

AngularJS 的內置指令均有ng-前綴

2.知識剖析
2.1 經常使用屬性之 ng-value

ng-value 指令用於設置 input 或 select 元素的 value 屬性

ng-value 的格式：

這裏有幾個結論：

1.ng-value會賦值給value，而且優先於ng-model
2.ng-value不是雙向綁定，不會由於value的值改變
能夠把ng-value就當成一個能夠用給input等元素的value賦值的屬性

2.2 經常使用屬性之 ng-if

ng-if 指令用於在表達式爲 false 時移除 HTML 元素，在表達式爲 true 時添加 HTML 元素

ng-if 的格式

這裏區別於ng-show和ng-hide，ng-if會直接在DOM樹中添加或者刪除節點，而前面兩個只會顯示隱藏

2.3 經常使用屬性之 ng-click

ng-click 指令告訴了 AngularJS HTML 元素被點擊後須要執行的操做

ng-click 的格式

這裏能夠參考js的onclick

2.4 經常使用屬性之 ng-options

ng-options 指令用於使用 options 填充 select 元素的選項

這裏能夠對比ng-repeat的方法

2.5 經常使用屬性之 ng-class

ng-class 指令用於給 HTML 元素動態綁定一個或多個 CSS 類

ng-class 指令的值能夠是字符串，對象，或一個數組

3.常見問題
實例：ng-if會生成一個子做用域，在ng-if隱藏（不存在）時的做用域$scope在ng-if顯示後，會搜索不到其子做用域，致使ng-model綁定不到ng-if新生成的子做用域內的值

很是見實例：uib-progressbar只能使用value而且能夠使用表達式

4.解決方案
在大部分狀況使用ng-show代替ng-if

或者能夠使用ng-if可是同時須要將ng-model中的變量添加$parent來獲取父級做用域

5.編碼實戰
這裏看一下我在任務中的實例

6.拓展思考
1.什麼狀況下使用ng-if代替ng-show（轉）

2.ng-click、ng-change、ng-dblclick、ng-checked該怎麼選擇（轉）

7.參考文獻
參考一：正確使用ng-if和ng-show

參考二：ng-model與ng-value的區別

參考三：菜鳥教程

參考四：ng-class用法

8.更多討論
Q1:  ng-model何時能夠不用？

A1:  ng-model在須要雙向綁定時候使用

Q2:  ng-if會產生ng-model綁定得不到數據怎麼辦？

A2:  在ng-model的表達式前添加$parent.來獲取父級做用域

Q3:  ng-options會有一個空置怎麼解決？

A3:  爲ng-model添加初始值

PPT：https://it-xzy.github.io/WEB-...

騰訊視頻：https://v.qq.com/x/page/d0625...

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