大家好，我是IT修真院成都分院第7期的學(xué)員韓建名，一枚正直純潔善良的WEB前端程序員。
今天給大家?guī)淼氖牵篴ngular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.編碼實戰(zhàn)
5.擴展思考
6.參考文獻
1.背景介紹
指令是一個Dom元素上的標(biāo)簽(和元素上的屬性, CSS類樣式一樣，屬于這個Dom元素)，它告訴AngualrJS的HTML編譯器，去附加一個行為到這個Dom元素上去，這個行為可以改變這個Dom元素，或者這個Dom元素的子元素。AngularJS通過被稱為 指令 的新屬性來擴展HTML。AngularJS通過內(nèi)置的指令來為應(yīng)用添加功能。AngularJS內(nèi)置指令是擴展的HTML屬性，帶有前綴ng-。
Angular有許多指令，今天我們主要來從ng-if、ng-class、ng-option、ng-value、ng-click這幾個指令入手。
2.知識剖析
(1)ng-if
ng-if指令用于在表達式為false時移除HTML元素。如果ng-if語句執(zhí)行的結(jié)果為true，會添加HTML元素，并顯示。ng-if指令不同于ng-hide/ng-show，ng-hide/ng-show是隱藏元素,設(shè)置元素的display為none。而ng-if是從DOM中移除元素。ng-hide指令在表達式為true時隱藏指定的HTML元素。ng-show指令在表達式為true時顯示指定的HTML元素。 語法所有的 HTML 元素都支持該指令。
保留 HTML:
Welcome
Welcome to my home.
當(dāng)復(fù)選框取消選中時 DIV 元素將移除。
當(dāng)重新選中復(fù)選框，DIV 元素會重新顯示。
(2)ng-class
ng-class指令用于給HTML元素動態(tài)綁定一個或多個CSS類。ng-class指令的值可以是字符串，對象，或一個數(shù)組。如果是字符串，多個類名使用空格分隔。如果是對象，需要使用key-value對，key為你想要添加的類名，value是一個布爾值。只有在value為true時類才會被添加。如果是數(shù)組，可以由字符串或?qū)ο蠼M合組成，數(shù)組的元素可以是字符串或?qū)ο蟆?/p>
有三種方式：
第一種：通過數(shù)據(jù)的雙向綁定（不推薦）
第二種：通過對象數(shù)組
第三種：通過key/value
第一種
function changeClass(){? ? ? ? ? ? ? ? ? ? ? ? $scope.className = "change2";? ? ? ? ? ? ? ? ? ? }
第二種
function changeClass(){? ? ? ? ? ? ? ? ? ? ? ? $scope.className = true/false;? ? ? ? ? ? ? ? ? ? }
實現(xiàn)很簡單，就是當(dāng)className為真的時候class為zhende，相反則為jiade。但是有一點不好的只能夠讓一個元素擁有兩種狀態(tài)，雖然這么說,基本也是滿足所需了
第三種
function changeClass(){? ? ? ? ? ? ? ? ? ? $scope.lala = true;? ? ? ? ? ? ? ? }
當(dāng)lala為true的時候，class則為haha，個人認為這個是比較推薦的，可以彌補第二種方式的點點遺憾~
(3)ng-option
ng-options指令用于使用options填充select元素的選項。ng-options屬性可以在表達式中使用數(shù)組或?qū)ο髞碜詣由梢粋€select中的option列表。ng-options與ng-repeat很相似，很多時候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處，例如減少內(nèi)存提高速度，以及提供選擇框的選項來讓用戶選擇。
(4)ng-value
ng-value指令用于設(shè)置input或select元素的value屬性。和value相比，它的值可以是表達式，所以相比之下可以實現(xiàn)更多需求。比如當(dāng)需要使用ng-repeat來動態(tài)生成input[]的時候，ngValue是很有用處的。
(5)ng-click
ng-click指令告訴了AngularJS HTML元素被點擊后需要執(zhí)行的操作。如果是使用ng-click來實現(xiàn)函數(shù)的執(zhí)行的話，還可以進行傳參。一個ng-click可以觸發(fā)多個操作，
先執(zhí)行function1后執(zhí)行function2
3.常見問題
ng-option表達式的寫法
1、ng-option表達式的寫法ng-options的值可以是一個內(nèi)涵表達式（comprehension expression），其實這只是一種有趣的說法，簡單來說就是它可以接收一個數(shù)組或者對象，并對它們進行循環(huán)，將內(nèi)部的內(nèi)容提供給select標(biāo)簽內(nèi)部的選項。它可以是一下兩種形式。
(1)數(shù)組作為數(shù)據(jù)源用數(shù)組中的值做標(biāo)簽。(label for value in array)用數(shù)組中的值作為選中的標(biāo)簽。(select as label for value in array)用數(shù)組中的值做標(biāo)簽組。(label group by group for value in array)用數(shù)組中的值作為選中的標(biāo)簽組。(select as label group by group for value in array track by trackexpr)
(2)對象作為數(shù)據(jù)源用對象的鍵-值（key-value）做標(biāo)簽。(label for (key , value) in object)用對象的鍵-值作為選中的標(biāo)簽。(select as label for (key , value) in object)用對象的鍵-值作為標(biāo)簽組。(label group by group for (key, value) in object)用對象的鍵-值作為選中的標(biāo)簽組。(select as label group by group for (key, value) in ob)
4.編碼實戰(zhàn)
Demo
5.拓展思考
ng-if的作用域問題ng-if指令會創(chuàng)建一個子級作用域，因此，如果在ng-if指令中添加了元素，并向元素屬性增加ng-model指令，那么ng-model指令對應(yīng)的作用域?qū)傩宰蛹壸饔糜颍⒎强刂破髯⑷氲?scope作用域?qū)ο?，這點在進行雙向數(shù)據(jù)綁定時，需要引起注意。因此，解決ng-if中ng-model值無效的問題，主要方法就是在綁定值時添加$parent標(biāo)識，或者用ng-show指令代替ng-if指令，這兩種方法都可以達到同樣的頁面效果。 寫法如下： ng-model="$parent.industry"
6.參考文獻
