ng-options和ng-select都屬于angluar里的作用在表格或者下拉菜單的標簽攘已。
ng-options的值可以是一個內(nèi)涵表達式（comprehension expression），其實這只是一種有趣的說法怜跑，簡單來 說就是它可以接收一個數(shù)組或者對象样勃，并對她們進行循環(huán)，將內(nèi)部的內(nèi)容提供給select標簽內(nèi)部的選項性芬。 ng-select 它可以幫助你通過數(shù)據(jù)模型來創(chuàng)建select元素.它很好的支持了select標簽的語法峡眶。
而ng-options、ng-select如何使用呢植锉？
ng-options：
ng-options 指令用于使用<option>填充<select>選項辫樱。
ng-options屬性可以在表達式中使用數(shù)組或?qū)ο髞碜詣由梢粋€select中的option列表。ng-options與 ng-repeat很相似狮暑，很多時候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處辉饱，例如減少內(nèi)存提高速度搬男，以及提供選擇框的選項來讓用戶選擇。
ng-select：
ng-select用來將數(shù)據(jù)同HTML的select標簽進行綁定彭沼。這個指令可以 和ng-model以及ng-options指令一起使用缔逛，構(gòu)建精細且表現(xiàn)良好的動態(tài)表單。 ng-select 它可以幫助你通過數(shù)據(jù)模型來創(chuàng)建select元素.它很好的支持了select標簽的語法, 而ng-options用在selectd上面
使用np-options和ng-select都會碰到一些問題溜腐，比如：ng-option表達式的寫法译株？
1、數(shù)組作為數(shù)據(jù)源
用數(shù)組中的值做標簽挺益。(label for value in array)
用數(shù)組中的值作為選中的標簽歉糜。(select as label for value in array)
用數(shù)組中的值做標簽組。(label group by group for value in array)
用數(shù)組中的值作為選中的標簽組望众。(select as label group by group for value in array track by trackexpr)
2匪补、對象作為數(shù)據(jù)源
用對象的鍵-值（key-value）做標簽。(label for (key , value) in object)
用對象的鍵-值作為選中的標簽烂翰。(select as label for (key , value) in object)
用對象的鍵-值作為標簽組夯缺。(label group by group for (key, value) in object)
用對象的鍵-值作為選中的標簽組。(select as label group by group for (key, value) in ob)
也許這樣看會有點累甘耿，我們舉個例子：
<select ng-model="myOption" ?ng-options="value.id as value.label group ?by value.group for value in myOptions">
? ? ?<option>--</option>
</select>
ng-model的值會指向select元素的當前選中項的value值. ng-options指令會用于填充select下拉選項,它的值還需要深究一下: 我們從右邊往左邊看會比較容易,首先是:value in myOptions踊兜。
它表示你要迭代當前作用域下的myOptions對象. 迭代時,myOptions對象里的每一項的名字就叫value.接下來是:group by value.group，它告訴angular.js去創(chuàng)建這個標簽:
<optgroup label="value.group">
? ? ?...........................
<optgroup>
標簽的label屬性將會被value的group屬性值填充.
最后是: value.id as value.label
value.id將會和模型進行綁定,它的值會被存進ng-model屬性里去(也就是option的value值,被選中后就是select標簽的value). 如果你沒有寫value.id as,而是只寫了value.label,那么,整個對象會被作為ng-model的值.
value.label就是option元素的選項名.這段代碼渲染的結(jié)果如下:
<optgroup label="Group 1">
? ? ? ? <option value="0">Item 1</option>
? ? ? ?<option value="1">ltem 2</option>
</optgroup>
注意一下options的value屬性: 你可能認為它的值應(yīng)該是數(shù)據(jù)模型中的id屬性值,但事實并非如此(雖然一開始我也這么認為).事實上,它是一個遞增的數(shù)字,這個數(shù)字指向的是模型的索引值(這里的模型就是myOptions數(shù)組).不用擔(dān)心它-當用戶選擇某一項的時候,正確的id還是會被選中,并且傳遞到ng-model屬性中去.另外,如果你的ng-options表達式里沒有value.id部分,那選中項對應(yīng)的整個對象會成為ng-model的值.
同時佳恬，也可以試試以不同方法為數(shù)據(jù)源的option是如何顯示的捏境，按照不同的形式去寫會有完全不一樣的顯示布局效果于游，這是angular里比較重要的知識點。
最后就是我們一般使用它們會碰到的一個問題垫言，angularJS的ng-model綁定到select上贰剥，會自動增加一個value為空的option,這是為什么呢？
原因：ng-model沒有初始化導(dǎo)致的筷频， 如果ng-model所綁定的變量的值在ng-options綁定的value里面有蚌成， 下拉選框中就不會有空白的一項，選中別的數(shù)據(jù)項以后消失凛捏； 如果ng-model所綁定的變量的值不在ng-options綁定的value里面担忧， 下拉選框中就不會有空白一項,并且只有當ng-options綁定的value里有對應(yīng) 的text為空行時，這個空行才會一直存在于下拉選項里坯癣。
解決辦法
方法一：將select中的一個option設(shè)置為空涵妥，就可以防止因添加ng-model自動添加空option的問題
方法二：自己預(yù)先添加一個value為空的option，再用ng-if="false"把它去掉坡锡。
-----------------------------------------------------------------------------------------------------------------------
IT修真院
