大家好笔宿，我是IT修真院北京分院第27期學(xué)員，一枚正直善良的前端程序員今天跟大家分享一下前端知識點棱诱。
今天講下深度思考中的知識點
————angular?js?常用指令ng-if泼橘、ng-class、ng-option迈勋、ng-value炬灭、ng-click是如何使用的？
1.背景介紹
指令是一個Dom元素上的標(biāo)簽(和元素上的屬性, CSS 類樣式一樣靡菇，屬于這個Dom元素)重归，
? ? 它告訴AngualrJS的HTML 編譯器，去附加一個行為到這個Dom元素上去厦凤，
? ? 這個行為可以改變這個Dom元素鼻吮，或者這個Dom元素的子元素。
AngularJS 通過被稱為 指令 的新屬性來擴展 HTML较鼓。
AngularJS 通過內(nèi)置的指令來為應(yīng)用添加功能椎木。
? ? AngularJS 內(nèi)置指令是擴展的 HTML 屬性，帶有前綴 ng-博烂。
2.知識剖析
ng-if拓哺、ng-class、ng-option脖母、ng-value、ng-click是如何使用的闲孤？
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 元素。
ng-class 指令用于給 HTML 元素動態(tài)綁定一個或多個 CSS 類吕朵。
ng-class 指令的值可以是字符串猎醇，對象，或一個數(shù)組努溃。
如果是字符串硫嘶，多個類名使用空格分隔。
如果是對象梧税，需要使用 key-value 對沦疾，key 為你想要添加的類名，value 是一個布爾值第队。只有在 value 為 true 時類才會被添加哮塞。
如果是數(shù)組，可以由字符串或?qū)ο蠼M合組成凳谦，數(shù)組的元素可以是字符串或?qū)ο蟆?/p>
ng-options 指令用于使用 <options> 填充 <select> 元素的選項忆畅。
ng-options屬性可以在表達式中使用數(shù)組或?qū)ο髞碜詣由梢粋€select中的option列表。ng-options與ng-repeat很相似晾蜘，很多時候可以用ng-repeat來代替ng-options邻眷。但是ng-options提供了一些好處，例如減少內(nèi)存提高速度剔交，以及提供選擇框的選項來讓用戶選擇肆饶。
ng-value 指令用于設(shè)置 input 或 select 元素的 value 屬性。
和value相比岖常，它的值可以是表達式驯镊，所以相比之下可以實現(xiàn)更多需求。
比如當(dāng)需要使用ng-repeat來動態(tài)生成input[]的時候竭鞍，ngValue是很有用處的板惑。
ng-click 指令告訴了 AngularJS HTML 元素被點擊后需要執(zhí)行的操作。
如果是使用ng-click來實現(xiàn)函數(shù)的執(zhí)行的話偎快，還可以進行傳參冯乘。
一個ng-click可以觸發(fā)多個操作，
<button ng-click="function1();function2()"></button>
先執(zhí)行function1后執(zhí)行function2
3.常見問題
ng-option表達式的寫法晒夹？
4.解決方案
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)
5.擴展思考
ng-if的作用域問題
ng-if指令會創(chuàng)建一個子級作用域，因此噩峦，如果在ng-if指令中添加了元素锭沟，
? ? ? ? 并向元素屬性增加 ng-model指令，那么ng-model指令對應(yīng)的作用域?qū)傩?/p>
? ? ? ? 子級作用域识补，而并非控制器注入的$scope作用域?qū)ο笞寤矗@點在進行雙向數(shù)
據(jù)綁定時，需要引起注意凭涂。
因此祝辣，解決ng-if中ng-model值無效的問題，主要方法就是在綁定值時添加$parent標(biāo)識切油，
? ? 或者用ng-show指令代替ng-if指令蝙斜，這兩種方法都可以達到同樣的頁面效果。
寫法如下：
ng-model="$parent.industry"
6.參考文獻
p>參考一：菜鳥教程
參考二：[Angularjs]ng-select和ng-options
7.更多討論
Q1：提問人：
用angularJS的ng-model綁定到select上澎胡，會自動增加一個value為空的option,這是為什么孕荠？
A1：回答人：李浩
回答：
原因：ng-model沒有初始化導(dǎo)致的，
? ? 如果ng-model所綁定的變量的值在ng-options綁定的value里面有攻谁，
下拉選框中就不會有空白的一項稚伍，選中別的數(shù)據(jù)項以后消失；
? ? 如果ng-model所綁定的變量的值不在ng-options綁定的value里面戚宦，
? ? 下拉選框中就不會有空白一項,并且只有當(dāng)ng-options綁定的value里有對應(yīng)
? ? 的text為空行時个曙，這個空行才會一直存在于下拉選項里。
解決辦法
方法一：將select中的一個option設(shè)置為空受楼，就可以防止因添加ng-model自動添加空option的問題
方法二：自己預(yù)先添加一個value為空的option困檩，再用ng-if="false"把它去掉
Q2：提問人：
A2：回答人：李浩
回答：
三.ng-options與ng-repeat自動生成option選項的區(qū)別：
ng-options生成的option選項選中后祠挫，綁定到ngModel的值可以是對象。ng-repeat綁定到ngModel的值只能是字符串悼沿。
select初始化時需要為ngModel指定值，否則會出現(xiàn)空白選項骚灸。
Q3：提問人：
ng-value和ng-bind有什么區(qū)別糟趾？
A3：回答人：李浩
回答：
1、ng-model : 是雙向數(shù)據(jù)綁定甚牲，改變頁面上ng-model模塊的值义郑，也會對$scope中對應(yīng)的值起作用;
? ? ? ng-bind : 是單向數(shù)據(jù)綁定，頁面上改變并不會對$scope中內(nèi)容起到作用;
? ? ? ng-value : 作用類似于 html中value的作用;
2丈钙、ng-model : 可以定義在 等標(biāo)簽內(nèi)非驮，顯示值
? ? ? ng-bind : 是覆蓋html元素的內(nèi)容，所以放在中不會顯示值雏赦，查看覆蓋后的代碼是xxxx劫笙，所以不會顯示值，
? ? ? 可以放在等標(biāo)簽中
3星岗、下邊的一段代碼可以看到ng-model與ng-value結(jié)合使用的效果填大，類比于原生radio使用方法，ng-model類似于name的作用俏橘，ng-value是賦值給ng-model
1允华、ng-model : 是雙向數(shù)據(jù)綁定，改變頁面上ng-model模塊的值寥掐，也會對$scope中對應(yīng)的值起作用;
? ? ? ng-bind : 是單向數(shù)據(jù)綁定靴寂，頁面上改變并不會對$scope中內(nèi)容起到作用;
? ? ? ng-value : 作用類似于 html中value的作用;
2、ng-model : 可以定義在 等標(biāo)簽內(nèi)召耘，顯示值
? ? ? ng-bind : 是覆蓋html元素的內(nèi)容百炬，所以放在中不會顯示值，查看覆蓋后的代碼是xxxx怎茫，所以不會顯示值收壕，
? ? ? 可以放在等標(biāo)簽中
3、下邊的一段代碼可以看到ng-model與ng-value結(jié)合使用的效果轨蛤，類比于原生radio使用方法蜜宪，ng-model類似于name的作用，ng-value是賦值給ng-model
感謝閱讀
github-PPT鏈接
https://ptteng.github.io/WEB/ppt/js-08%20ng-if%20ng-class%20ng-option%20ng-value.html#/
騰訊視頻鏈接
https://v.qq.com/x/page/s05363jigtg.html
-----------------------------------------------------------------------------------------------------------------------------------
人生苦短祥山，想學(xué)Python圃验。
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)缝呕，非商業(yè)轉(zhuǎn)載請注明出處澳窑。
