基础下拉列表： 请选择你的萌宠猫狗兔狮
本节课程源码：
1
2
3
4
5
6
<
div
ng-controller
=
"OptionCtrl"
>
<
select
ng-model
=
"seleted"
ng-options
=
"a.name for a in animals"
>
<
option
value
=
""
>请选择你的萌宠</
option
>
</
select
>
</
div
>
自定义下拉显示名称： 请选择你的萌宠猫爱吃鱼狗爱吃骨头兔爱吃胡萝卜狮爱吃肉
本节课程源码：
1
2
3
4
5
6
<
div
ng-controller
=
"OptionCtrl"
>
<
select
ng-model
=
"seleted"
ng-options
=
"(a.name + '爱吃' + a.food) for a in animals"
>
<
option
value
=
""
>请选择你的萌宠</
option
>
</
select
>
</
div
>
分组选项： 请选择你的萌宠猫的爱好是玩球兔的爱好是刨洞狗的爱好是接盘子狮的爱好是猎物
本节课程源码：
1
2
3
4
5
6
<
div
ng-controller
=
"OptionCtrl"
>
<
select
ng-model
=
"seleted"
ng-options
=
"(a.name + '的爱好是' + a.favor) group by a.sex for a in animals"
>
<
option
value
=
""
>请选择你的萌宠</
option
>
</
select
>
</
div
>
自定义ngModel的值： 请选择你的萌宠猫狗兔狮
本节课程源码：
1
2
3
4
5
6
<
div
ng-controller
=
"OptionCtrl"
>
<
select
ng-model
=
"seletedId"
ng-options
=
"a.id as a.name for a in animals"
>
<
option
value
=
""
>请选择你的萌宠</
option
>
</
select
>
</
div
>
本节课程源码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var
app = angular.module(
'OptionApp'
, []);
app.controller(
'OptionCtrl'
, [
'$scope'
,
function
($scope){
$scope.seleted =
''
;
$scope.animals = [
{
id:
'00001'
,
name:
'猫'
,
sex:
'雌'
,
food:
'鱼'
,
favor:
'玩球'
},
{
id:
'00002'
,
name:
'狗'
,
sex:
'雄'
,
food:
'骨头'
,
favor:
'接盘子'
},
{
id:
'00003'
,
name:
'兔'
,
sex:
'雌'
,
food:
'胡萝卜'
,
favor:
'刨洞'
},
{
id:
'00004'
,
name:
'狮'
,
sex:
'雄'
,
food:
'肉'
,
favor:
'猎物'
}
];
}]);
ngOptions(optional) – {comprehension_expression=}
名称说明forarraydatasourceslabelforvalueinarrayselectaslabelforvalueinarraylabelgroupbygroupforvalueinarrayselectaslabelgroupbygroupforvalueinarrayforobjectdatasourceslabelfor(key,value)inobjectselectaslabelfor(key,value)inobjectlabelgroupbygroupfor(key,value)inobjectselectaslabelgroupbygroupfor(key,value)inobjectwhere
array / object : an expression which evaluates to an array / object to iterate over.value : local variable which will refer to each item in the array or each property value of object during iteration.key : local variable which will refer to a property name in object during iteration.label : The result of this expression will be the label forselect : The result of this expression will be bound to the model of the parent <select> element. If not specified, select expression will default to value.group : The result of this expression will be used to group options using the <optgroup> DOM element.
转载于:https://www.cnblogs.com/wpfblogs/p/4565133.html
相关资源：AngularJS入门教程之Select(选择框)详解
