大家好~ ?我是一枚正直純潔的苦逼程序員Ｑ拾病０橥！Ｗ卑簟澡腾！
ANGULAR JS常用指令NG-IF、NG-CLASS糕珊、NG-OPTION动分、NG-VALUE、NG-CLICK是如何使用的红选？
1.背景介紹
指令是一個(gè)Dom元素上的標(biāo)簽(和元素上的屬性, CSS類(lèi)樣式一樣刺啦，屬于這個(gè)Dom元素)，
它告訴AngualrJS的HTML編譯器纠脾，去附加一個(gè)行為到這個(gè)Dom元素上去玛瘸，
這個(gè)行為可以改變這個(gè)Dom元素，或者這個(gè)Dom元素的子元素苟蹈。
AngularJS通過(guò)被稱(chēng)為 指令 的新屬性來(lái)擴(kuò)展HTML糊渊。
AngularJS通過(guò)內(nèi)置的指令來(lái)為應(yīng)用添加功能。
AngularJS內(nèi)置指令是擴(kuò)展的HTML屬性慧脱，帶有前綴ng-渺绒。
2.知識(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元素。
3.常見(jiàn)問(wèn)題
指令是一個(gè)Dom元素上的標(biāo)簽(和元素上的屬性, CSS類(lèi)樣式一樣牧牢，屬于這個(gè)Dom元素)看锉，
它告訴AngualrJS的HTML編譯器，去附加一個(gè)行為到這個(gè)Dom元素上去塔鳍，
這個(gè)行為可以改變這個(gè)Dom元素伯铣，或者這個(gè)Dom元素的子元素。
AngularJS通過(guò)被稱(chēng)為 指令 的新屬性來(lái)擴(kuò)展HTML献幔。
AngularJS通過(guò)內(nèi)置的指令來(lái)為應(yīng)用添加功能懂傀。
AngularJS內(nèi)置指令是擴(kuò)展的HTML屬性，帶有前綴ng-蜡感。
ng-value：
ng-value指令用于設(shè)置input或select元素的value屬性蹬蚁。
和value相比，它的值可以是表達(dá)式郑兴，所以相比之下可以實(shí)現(xiàn)更多需求犀斋。
比如當(dāng)需要使用ng-repeat來(lái)動(dòng)態(tài)生成input[]的時(shí)候，ngValue是很有用處的情连。
ng-click：
ng-click指令告訴了AngularJS HTML元素被點(diǎn)擊后需要執(zhí)行的操作叽粹。
如果是使用ng-click來(lái)實(shí)現(xiàn)函數(shù)的執(zhí)行的話(huà)，還可以進(jìn)行傳參却舀。
一個(gè)ng-click可以觸發(fā)多個(gè)操作虫几，
先執(zhí)行function1后執(zhí)行function2
3.常見(jiàn)問(wèn)題
1、ng-option表達(dá)式的寫(xiě)法
4.解決方案
1挽拔、ng-option表達(dá)式的寫(xiě)法
ng-options的值可以是一個(gè)內(nèi)涵表達(dá)式（comprehension expression）辆脸， 其實(shí)這只是一種有趣的說(shuō)法，簡(jiǎn)單來(lái)說(shuō)就是它可以接收一個(gè)數(shù)組或者對(duì)象螃诅， 并對(duì)它們進(jìn)行循環(huán)啡氢，將內(nèi)部的內(nèi)容提供給select標(biāo)簽內(nèi)部的選項(xiàng)。它可以是一下兩種形式术裸。
5.編碼實(shí)戰(zhàn)
dome
6.擴(kuò)展思考
用angularJS的ng-model綁定到select上倘是，會(huì)自動(dòng)增加一個(gè)value為空的option,這是為什么？
原因：ng-model沒(méi)有初始化導(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的問(wèn)題 方法二：自己預(yù)先添加一個(gè)value為空的option，再用ng-if="false"把它去掉
7.參考文獻(xiàn)
參考一：菜鳥(niǎo)教程
參考二：[Angularjs]ng-select和ng-options
8.更多討論
問(wèn)題一：
ng-click和ng-ng-checked那個(gè)是講的雙向綁定苇羡？
解決：
ng-click
問(wèn)題二;
ng-if是干嘛的?
ng-if指令用于在表達(dá)式為 false 時(shí)移除 HTML 元素绸吸。
如果 if 語(yǔ)句執(zhí)行的結(jié)果為 true，會(huì)添加移除元素设江，并顯示锦茁。
問(wèn)題三：
ngIf與ngShow還有ng-hide什么不同？
angularJS中的ng-show叉存、ng-hide码俩、ng-if指令都可以用來(lái)控制dom元素的顯示或隱藏。ng-show和ng-hide根據(jù)所給表達(dá)式的值來(lái)顯示或隱藏HTML元素歼捏。當(dāng)賦值給ng-show指令的值為false時(shí)元素會(huì)被隱藏稿存，值為true時(shí)元素會(huì)顯示。ng-hide功能類(lèi)似瞳秽，使用方式相反瓣履。元素的顯示或隱藏是通過(guò)改變CSS的display屬性值來(lái)實(shí)現(xiàn)的
