ng-options和ng-select都屬于angluar里的作用在表格或者下拉菜單的標簽。
ng-options的值可以是一個內涵表達式（comprehension expression），其實這只是一種有趣的說法，簡單來 說就是它可以接收一個數組或者對象，并對她們進行循環，將內部的內容提供給select標簽內部的選項。 ng-select 它可以幫助你通過數據模型來創建select元素.它很好的支持了select標簽的語法。
而ng-options、ng-select如何使用呢？
ng-options：
ng-options 指令用于使用<option>填充<select>選項。
ng-options屬性可以在表達式中使用數組或對象來自動生成一個select中的option列表。ng-options與 ng-repeat很相似，很多時候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處，例如減少內存提高速度，以及提供選擇框的選項來讓用戶選擇。
ng-select：
ng-select用來將數據同HTML的select標簽進行綁定。這個指令可以 和ng-model以及ng-options指令一起使用，構建精細且表現良好的動態表單。 ng-select 它可以幫助你通過數據模型來創建select元素.它很好的支持了select標簽的語法, 而ng-options用在selectd上面
使用np-options和ng-select都會碰到一些問題，比如：ng-option表達式的寫法？
1、數組作為數據源
用數組中的值做標簽。(label for value in array)
用數組中的值作為選中的標簽。(select as label for value in array)
用數組中的值做標簽組。(label group by group for value in array)
用數組中的值作為選中的標簽組。(select as label group by group for value in array track by trackexpr)
2、對象作為數據源
用對象的鍵-值（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去創建這個標簽:
<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元素的選項名.這段代碼渲染的結果如下:
<optgroup label="Group 1">
? ? ? ? <option value="0">Item 1</option>
? ? ? ?<option value="1">ltem 2</option>
</optgroup>
注意一下options的value屬性: 你可能認為它的值應該是數據模型中的id屬性值,但事實并非如此(雖然一開始我也這么認為).事實上,它是一個遞增的數字,這個數字指向的是模型的索引值(這里的模型就是myOptions數組).不用擔心它-當用戶選擇某一項的時候,正確的id還是會被選中,并且傳遞到ng-model屬性中去.另外,如果你的ng-options表達式里沒有value.id部分,那選中項對應的整個對象會成為ng-model的值.
同時，也可以試試以不同方法為數據源的option是如何顯示的，按照不同的形式去寫會有完全不一樣的顯示布局效果，這是angular里比較重要的知識點。
最后就是我們一般使用它們會碰到的一個問題，angularJS的ng-model綁定到select上，會自動增加一個value為空的option,這是為什么呢？
原因：ng-model沒有初始化導致的， 如果ng-model所綁定的變量的值在ng-options綁定的value里面有， 下拉選框中就不會有空白的一項，選中別的數據項以后消失； 如果ng-model所綁定的變量的值不在ng-options綁定的value里面， 下拉選框中就不會有空白一項,并且只有當ng-options綁定的value里有對應 的text為空行時，這個空行才會一直存在于下拉選項里。
解決辦法
方法一：將select中的一個option設置為空，就可以防止因添加ng-model自動添加空option的問題
方法二：自己預先添加一個value為空的option，再用ng-if="false"把它去掉。
-----------------------------------------------------------------------------------------------------------------------
IT修真院
