[转]AngularJS 之 ng-options指令

原文地址

一. 基本下拉效果(lable for value in array)

其中select标签中的ng-model属性必须有，其值为选中的对象或属性值。

usage:label for value in array

选项，{{selected}}

-- 请选择 --

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: '黃'
}];
}]);

二. 自定义下拉显示名称(label for value in array)

label可以根据需要拼接出不同的字符串

usage:label for value in array(label可以根据需求拼接出不同的字符串)

选项，{{selected}}

-- 请选择 --

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: '黃'
}];
}]);

三. ng-options 选项分组

group by分组项

usage:label group by groupName for value in array

选项，{{selected}}

-- 请选择 --

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: '黃'
}];
}]);

四. ng-options 自定义ngModel的绑定

下面selected的值为optData的id

usage:select as label for value in array

选项，{{selected}}

-- 请选择 --

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: '黃'
}];
}]);

五. ng-options 多级下拉

{{label}}

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: [
'游泳',
'游戏',
'宅家里'
]
}
];
}]);

六. 在 select 中禁用某些结果.

七. 官网示例参考