angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
大家好，我是IT修真院鄭州分院第七期的學(xué)員馮亞超，一枚正直純潔善良的WEB程序員 今天給大家分享一下，題目angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
一、背景介紹
指令是一個(gè)Dom元素上的標(biāo)簽(和元素上的屬性, CSS 類樣式一樣，屬于這個(gè)Dom元素)， 它告訴AngualrJS的HTML 編譯器，去附加一個(gè)行為到這個(gè)Dom元素上去， 這個(gè)行為可以改變這個(gè)Dom元素，或者這個(gè)Dom元素的子元素。
AngularJS 通過被稱為 指令 的新屬性來擴(kuò)展 HTML。AngularJS 通過內(nèi)置的指令來為應(yīng)用添加功能。 AngularJS 內(nèi)置指令是擴(kuò)展的 HTML 屬性，帶有前綴 ng-。
二、知識(shí)剖析
ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
NG-IF
ng-if 指令用于在表達(dá)式為 false 時(shí)移除 HTML 元素。
如果 ng-if 語(yǔ)句執(zhí)行的結(jié)果為 true，會(huì)添加HTML元素，并顯示。
ng-if 指令不同于 ng-hide/ng-show， ng-hide/ng-show是隱藏元素,設(shè)置元素的 display 為 none。而 ng-if 是從 DOM 中移除元素。
ng-hide 指令在表達(dá)式為 true 時(shí)隱藏指定的 HTML 元素。
ng-show 指令在表達(dá)式為 true 時(shí)顯示指定的 HTML 元素。
NG-CLASS
ng-class 指令用于給 HTML 元素動(dòng)態(tài)綁定一個(gè)或多個(gè) CSS 類。
ng-class 指令的值可以是字符串，對(duì)象，或一個(gè)數(shù)組。
如果是字符串，多個(gè)類名使用空格分隔。
如果是對(duì)象，需要使用 key-value 對(duì)，key 為你想要添加的類名，value 是一個(gè)布爾值。只有在 value 為 true 時(shí)類才會(huì)被添加。
如果是數(shù)組，可以由字符串或?qū)ο蠼M合組成，數(shù)組的元素可以是字符串或?qū)ο蟆?/p>
NG-OPTION
ng-options 指令用于使用options填充select元素的選項(xiàng)。
ng-options屬性可以在表達(dá)式中使用數(shù)組或?qū)ο髞碜詣?dòng)生成一個(gè)select中的option列表。 ng-options與ng-repeat很相似，很多時(shí)候可以用ng-repeat來代替ng-options。 但是ng-options提供了一些好處，例如減少內(nèi)存提高速度，以及提供選擇框的選項(xiàng)來讓用戶選擇。
NG-VALUE
ng-value 指令用于設(shè)置 input 或 select 元素的 value 屬性。和value相比，它的值可以是表達(dá)式，所以相比之下可以實(shí)現(xiàn)更多需求。
比如當(dāng)需要使用ng-repeat來動(dòng)態(tài)生成input[]的時(shí)候，ngValue是很有用處的。
NG-CLICK
ng-click 指令告訴了 AngularJS HTML 元素被點(diǎn)擊后需要執(zhí)行的操作。
如果是使用ng-click來實(shí)現(xiàn)函數(shù)的執(zhí)行的話，還可以進(jìn)行傳參。
一個(gè)ng-click可以觸發(fā)多個(gè)操作
三、常見問題
ng-option表達(dá)式的寫法
四、解決方案
NG-OPTION表達(dá)式的寫法
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、對(duì)象作為數(shù)據(jù)源
用對(duì)象的鍵-值（key-value）做標(biāo)簽。(label for (key , value) in object)
用對(duì)象的鍵-值作為選中的標(biāo)簽。(select as label for (key , value) in object)
用對(duì)象的鍵-值作為標(biāo)簽組。(label group by group for (key, value) in object)
用對(duì)象的鍵-值作為選中的標(biāo)簽組。(select as label group by group for (key, value) in ob)
ng-options的值可以是一個(gè)內(nèi)涵表達(dá)式（comprehension expression）， 其實(shí)這只是一種有趣的說法，簡(jiǎn)單來說就是它可以接收一個(gè)數(shù)組或者對(duì)象， 并對(duì)它們進(jìn)行循環(huán)，將內(nèi)部的內(nèi)容提供給select標(biāo)簽內(nèi)部的選項(xiàng)。ng-options屬性可用于使用通過評(píng)估理解表達(dá)式獲得的數(shù)組或?qū)ο髞韯?dòng)態(tài)生成option 元素的select元素。
五、編碼實(shí)戰(zhàn)
騰訊視頻
六、拓展思考
七、參考文獻(xiàn)
ng-class用法
angular之ng-value指令
ng-select和ng-options
八、更多討論
用angularJS的ng-model綁定到select上，會(huì)自動(dòng)增加一個(gè)value為空的option,這是為什么？
原因：ng-model沒有初始化導(dǎo)致的， 如果ng-model所綁定的變量的值在ng-options綁定的value里面有， 下拉選框中就不會(huì)有空白的一項(xiàng)，選中別的數(shù)據(jù)項(xiàng)以后消失； 如果ng-model所綁定的變量的值不在ng-options綁定的value里面， 下拉選框中就不會(huì)有空白一項(xiàng),并且只有當(dāng)ng-options綁定的value里有對(duì)應(yīng) 的text為空行時(shí)，這個(gè)空行才會(huì)一直存在于下拉選項(xiàng)里。
解決辦法
方法一：將select中的一個(gè)option設(shè)置為空，就可以防止因添加ng-model自動(dòng)添加空option的問題
方法二：自己預(yù)先添加一個(gè)value為空的option，再用ng-if="false"把它去掉
PPT
總結(jié)
以上是生活随笔為你收集整理的angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
