1.基本下拉效果(lable for value in array)
其中select标签中的ng-model属性必须有,其值为选中的对象或属性值。
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
|
<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可以根据需要拼接出不同的字符串
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
|
<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分组项
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
|
<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 效果 http://sandbox.runjs.cn/show/nhi8ubrb
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
|
<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:
'黃'
}];
}]);
|
效果:http://runjs.cn/detail/nhi8ubrb
转自:http://www.jb51.net/article/67909.htm