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
- AngularJS中ng-options的用法
- angularjs中ng-options的用法
- Angularjs中ng-select和ng-options的用法详解
- Angularjs ng-options用法
- Angularjs中select 的ng-repeat 和 ng-options 用法和获取选取值
- Angularjs中select 的ng-repeat 和 ng-options 用法和获取选取值
- AngularJS中ng-options实现下拉列表的数据绑定
- Angularjs中ng-select和ng-options用法【select联动数据】
- AngularJs ng-options
- AngularJS动态绑定ng-options的ng-model
- AngularJs中ng-class用法
- angularJs中ng-model-options设置数据同步
- angularjs ng-show的用法
- 【AngularJS】ng-model-options指令
- AngularJS 之ng-options指令
- AngularJS 的select 控件的ng-options的使用示例
- ng-options用法详解
- ng-options 用法详解
- 修改图片大小
- 关于Java中static
- Python基础语法之内置的数据类型list和tuple
- ListView加载条目
- 侧拉菜单显示
- angularjs中ng-options的用法
- 欢迎使用CSDN-markdown编辑器
- 【软工学习】第十三章——UML建模技术
- linux终端关闭时为什么会导致在其上启动的进程退出?
- 主Activity的布局
- 主方法
- LeetCode 56. Merge Intervals 合并区间
- 成为Java顶尖程序员 ,看这11本书就够了
- 2017.08.13学习日记