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 指令用于使用

     

ng-model的值会指向select元素的当前选中项的value值. ng-options指令会用于填充select下拉选项,它的值还需要深究一下: 我们从右边往左边看会比较容易,首先是:value in myOptions。

它表示你要迭代当前作用域下的myOptions对象. 迭代时,myOptions对象里的每一项的名字就叫value.接下来是:group by value.group,它告诉angular.js去创建这个标签:


     ...........................

标签的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元素的选项名.这段代码渲染的结果如下:


       

       

注意一下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修真院

你可能感兴趣的:(angular里ng-options、ng-select是如何使用的?)