AngularJS入门教程:ng-options
- 基础下拉列表:
本节课程源码:
123456<
div
ng-controller
=
"OptionCtrl"
>
<
select
ng-model
=
"seleted"
ng-options
=
"a.name for a in animals"
>
<
option
value
=
""
>请选择你的萌宠</
option
>
</
select
>
</
div
>
- 自定义下拉显示名称:
本节课程源码:
123456<
div
ng-controller
=
"OptionCtrl"
>
<
select
ng-model
=
"seleted"
ng-options
=
"(a.name + '爱吃' + a.food) for a in animals"
>
<
option
value
=
""
>请选择你的萌宠</
option
>
</
select
>
</
div
>
- 分组选项:
本节课程源码:
123456<
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的值:
本节课程源码:
123456<
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: '猎物' } ]; }]); |
名称 | 说明 |
---|---|
for array data sources |
label for value in array |
select as label for value in array |
|
label group by group for value in array |
|
select as label group by group for value in array |
|
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 object |
|
where |
|