这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【angular里ng-options、ng-select是如何使用的？ 】
腾讯视频
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修真院
作者：mrquin6655
链接：https://www.jianshu.com/p/b108670534a6
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地