angularjs之ng-option
Posted 莫小龙
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs之ng-option相关的知识,希望对你有一定的参考价值。
angularjs之ng-option
ng-options一般有以下用法:
对于数组:
- label for value in array
- select as label for value in array
- label group by group for value in array
- label disable when disable for value in array
- label group by group for value in array track by trackexpr
- label disable when disable for value in array track by trackexpr
- label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)
- 对于对象:
- label for (key , value) in object
- select as label for (key ,value) in object
- label group by group for (key,value) in object
- label disable when disable for (key, value) in object
- select as label group by group for(key, value) in object
- select as label disable when disable for (key, value) in object
1.基本下拉效果(lable for value in array)
其中select标签中的ng-model属性必须有,其值为选中的对象或属性值。
<div ng-controller="ngselect"> <p>usage:label for value in array</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-options="o.id for o in optData"> <option value="">-- 请选择 --</option> </select> </div> m1.controller("ngselect",[\'$scope\',function($sc){ $sc.selected = \'\'; $sc.optData = [{ id: 10001, MainCategory: \'男\', ProductName: \'水洗T恤\', ProductColor: \'白\' },{ id: 10002, MainCategory: \'女\', ProductName: \'圓領短袖\', ProductColor: \'黃\' },{ id: 10003, MainCategory: \'女\', ProductName: \'圓領短袖\', ProductColor: \'黃\' }]; }]);
2.自定义下拉显示名称(label for value in array)
label可以根据需要拼接出不同的字符串
<div ng-controller="ngselect2"> <p>usage:label for value in array(label可以根据需求拼接出不同的字符串)</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-options="(o.ProductColor+\'-\'+o.ProductName) for o in optData"> <option value="">-- 请选择 --</option> </select> </div> m1.controller("ngselect2",[\'$scope\',function($sc){ $sc.selected = \'\'; $sc.optData = [{ id: 10001, MainCategory: \'男\', ProductName: \'水洗T恤\', ProductColor: \'白\' },{ id: 10002, MainCategory: \'女\', ProductName: \'圓領短袖\', ProductColor: \'黃\' },{ id: 10003, MainCategory: \'女\', ProductName: \'圓領短袖\', ProductColor: \'黃\' }]; }]);
3.ng-options 选项分组
group by分组项
<div ng-controller="ngselect3"> <p>usage:label group by groupName for value in array</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-options="(o.ProductColor+\'-\'+o.ProductName) group by o.MainCategory for o in optData"> <option value="">-- 请选择 --</option> </select> </div> m1.controller("ngselect3",[\'$scope\',function($sc){ $sc.selected = \'\'; $sc.optData = [{ id: 10001, MainCategory: \'男\', ProductName: \'水洗T恤\', ProductColor: \'白\' },{ id: 10002, MainCategory: \'女\', ProductName: \'圓領长袖\', ProductColor: \'黃\' },{ id: 10003, MainCategory: \'女\', ProductName: \'圓領短袖\', ProductColor: \'黃\' }]; }]);
4.ng-options 自定义ngModel的绑定
下面selected的值为optData的id
<div ng-controller="ngselect4"> <p>usage:select as label for value in array</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-options="o.id as o.ProductName for o in optData"> <option value="">-- 请选择 --</option> </select> </div> m1.controller("ngselect4",[\'$scope\',function($sc){ $sc.selected = \'\'; $sc.optData = [{ id: 10001, MainCategory: \'男\', ProductName: \'水洗T恤\', ProductColor: \'白\' },{ id: 10002, MainCategory: \'女\', ProductName: \'圓領长袖\', ProductColor: \'黃\' },{ id: 10003, MainCategory: \'女\', ProductName: \'圓領短袖\', ProductColor: \'黃\' }]; }]);
5.ng-options 多级下拉
<div ng-controller="ngselect5"> <select ng-model="selectedPerson" ng-options="obj.name for obj in people"></select> <select ng-model="selectedGenre"> <option ng-repeat="label in people[selectedPerson.id].interest">{{label}}</option> </select> </div> m1.controller("ngselect5",[\'$scope\',function($sc){ $sc.people = [ { id: 0, name: \'张三\', interest: [ \'爬山\', \'游泳\', \'旅游\', \'美食\' ] }, { id: 1, name: \'李四\', interest: [ \'音乐\', \'美食\', \'Coffee\', \'看书\' ] }, { id: 2, name: \'王五\', interest: [ \'音乐\', \'电影\', \'中国好声音\', \'爸爸去哪了\', \'非常静距离\' ] }, { id: 3, name: \'小白\', interest: [ \'游泳\', \'游戏\', \'宅家里\' ] } ]; }]);
原网址:http://www.cnblogs.com/zhx1991/p/4579886.html
以上是关于angularjs之ng-option的主要内容,如果未能解决你的问题,请参考以下文章
Angularjs:使用ng-option时如何在选择中包含空选项