angular中的常見指令ng-if、ng-class、ng-options、ng-value、ng-click
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【angular中的常見指令ng-if、ng-class、ng-options、ng-value、ng-click】
大家好，我是 IT 修真院上海分院第八期的學員何嶽，一枚正直純潔善良的web程式設計師
今天給大家分享一下，修真院官網 JS任務八，深度思考中的知識點——angular中的常見指令ng-if、ng-class、ng-options、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指令可以根據表示式的值在DOM中生成或移除一個元素。如果賦值給ng-if的表示式的值是false，那對應的元素將會從DOM中移除，否則生成一個新的元素插入DOM中。ng-if同no-show和ng-hide指令最本質的區別是，它不是通過CSS顯示或隱藏DOM節點，而是刪除或者新增結點
NG-CLASS：
ng-class 指令用於給 HTML 元素動態繫結一個或多個 CSS 類。
ng-class 指令的值可以是字串，物件，或一個數組。
如果是字串，多個類名使用空格分隔。
如果是物件，需要使用 key-value 對，key 為你想要新增的類名，value 是一個布林值。只有在 value 為 true 時類才會被新增。
如果是陣列，可以由字串或物件組合組成，陣列的元素可以是字串或物件。
NG-OPTIONS:
ng-options 指令用於使用<option>填充 <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可以觸發多個操作，
如<button ng-click="function1();function2()"></button>
先執行function1後執行function2
3.常見問題
ng-option表示式的寫法
4.解決方案
ng-option表示式的寫法
ng-options的值可以是一個內涵表示式（comprehension expression）， 其實這只是一種有趣的說法，簡單來說就是它可以接收一個數組或者物件， 並對它們進行迴圈，將內部的內容提供給select標籤內部的選項。它可以是一下兩種形式
陣列作為資料來源
用陣列中的值做標籤。
用陣列中的值作為選中的標籤。
用陣列中的值做標籤組。
用陣列中的值作為選中的標籤組。
物件作為資料來源
用物件的鍵-值（key-value）做標籤。
用物件的鍵-值作為選中的標籤。
用物件的鍵-值作為標籤組。
用物件的鍵-值作為選中的標籤組。
5.編碼實戰
6.擴充套件思考
ng-if的作用域問題
ng-if指令會建立一個子級作用域，因此，如果在ng-if指令中添加了元素，並向元素屬性增加ng-model指令，那麼ng-model指令對應的作用域屬於子級作用域，而並非控制器注入的$scope作用域物件，這點在進行雙向資料繫結時，需要引起注意。
因此，解決ng-if中ng-model值無效的問題，主要方法就是在繫結值時新增$parent標識， 或者用ng-show指令代替ng-if指令，這兩種方法都可以達到同樣的頁面效果。寫法如下：ng-model="$parent.industry"
7.參考文獻
8.更多討論
Q1：除了$parent以外，還有什麼方法可以獲取作用域的值
A1：通過給父級scope上新增{}來實現，把原始型別轉換成物件；通過controller as來實現。
Q2：AngularJs和jQuery最大的區別是什麼
A2：兩者的區別表現在資料雙向繫結，實質就是DOM的操作形式不一樣。jQuery通過選擇器找到DOM元素，再賦予元素的行為；而AngularJS則是，將指令與DOM繫結在一起，再擴充套件指令的行為。
Q3：ng-value和ng-bind有什麼區別
A3：ng-value用於設定 input 或 select 元素的 value 屬性， ng-bind指令告訴 AngularJS 使用給定的變數或表示式的值來替換 HTML 元素的內容。如果給定的變數或表示式修改了，指定替換的 HTML 元素也會修改。所有的 HTML 元素都支援該指令。
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地