angularjs中ng-options的用法

来源:互联网 发布:伊朗 朝鲜 知乎 编辑:程序博客网 时间:2024/06/07 02:24

ng-options 四种用法:
1.基本用法(显示 o 对象的某一个属性值作为下拉名称):
ng-options = "o.attr for o in dataArr"
2.显示更多:同一对象显示更多下拉名称(比如需要显示 o 对象的两个或更多个属性值作为一个下拉列表项):
ng-options = "(o.attr1 + ‘-’ + o.attr2) for o in dataArr "

3.选项分组(将下拉选项按照 o 对象某一属性分组显示):
ng-options = " (o.attr1 + ‘-’ + o.attr2) group by o.attr3 for o in dataArr "
4.自定义ngModel的绑定:
ng-options = "o.attr1 as o.attr2 for o in dataArr"
这时,o.attr1 是 ng-model 绑定的值,o.attr2 是下拉列表显示的值。

注意事项:
1.select标签中的ng-model属性必须有 ;
2.前3种方法 ng-model 绑定的都是一个对象,被选中的那个下拉列表项对应的对象;
只有第4种用法 ng-model 绑定的是对象的一个属性值,也就是自定义的 o.attr1 as o.attr2 for o in dataArr 中的 o.attr1 。

ng-options有以下格式的语法:
for array data sources(数组):
label for value in array //双向绑定对象
select as label for value in array //双向绑定value值
label group by group for value in array//双向绑定对象
select as label group by group for value in array track by trackexpr
//as和track不要同时使用,加载页面时绑定的是对象如果ng-model是一个value值就会多出一行‘?’的选项,当点击选择时绑定的是value值,容易出错

for object data sources(对象):
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

参考链接:
AngularJS select中ngOptions用法详解:http://www.cnblogs.com/laixiangran/p/4956751.html

[Angularjs]ng-select和ng-options:
http://www.cnblogs.com/wolf-sun/p/4614532.html

原创粉丝点击