文章目录
  1. 1. 实例一:基本下拉效果
  2. 2. 实例二:自定义下拉显示名称
  3. 3. 实例三: 让选项分组
  4. 4. 实例四:自定义ngModel的值
  5. 5. 参考

转自:http://my.oschina.net/gejiawen0913/blog/188539#OSC_h2_2,相当实用,尤其是实例3和4。

select 是 AngularJS 预设的一组directive。下面是其官网api doc给出的用法:AngularJS:select

大意是,select中的ngOption可以采用和ngRepeat指令类似的循环结构,其data source可以是array或者是object。针对两种data source又有衍生的好几种用法。但是官网的例子实在是太少了。

下面是针对几个不太容易理解的用法的例子。

先上controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function selectCtrl($scope) {
$scope.selected = '';
$scope.model = [{
id: 10001,
mainCategory: '男',
productName: '水洗T恤',
productColor: '白'
}, {
id: 10002,
mainCategory: '女',
productName: '圆领短袖',
productColor: '黑'
}, {
id: 10003,
mainCategory: '女',
productName: '短袖短袖',
productColor: '黃'
}];
}

实例一:基本下拉效果

usage: label for value in array

1
2
3
<select ng-model="selected" ng-options="m.productName for m in model">
<option value="">-- 请选择 --</option>
</select>

说明

  1. usage中的 value 也就是 ng-options 中的 m,而 m 是数组model的一个元素,它是一个变量
  1. usage中的 label 也就是 ng-options 中的m.productName, 其实就是一个 AngularJS Expression

实例二:自定义下拉显示名称

usage: label for value in array

1
2
3
<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) for m in model">
<option value="">-- 请选择 --</option>
</select>

说明

  1. 可以看到,usage 中的 label 可以根据需求拼接出不同的字符串

实例三: 让选项分组

usage: label group by group for value in array

1
2
3
4
<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) group by m.mainCategory for m in model">
<option value="">-- 请选择 --</option>
</select>

说明

  1. 这里使用了group by,通过$scope.model中的mainCategory字段进行分组

实例四:自定义ngModel的值

usage: select as label for value in array

1
2
3
4
<select ng-model="selected" ng-options="m.id as m.productName for m in model">
<option value="">-- 请选择 --</option>
</select>

说明

  1. 这种用法也是select指令最复杂的一种。从效果中可以看出,usage中select的作用就是重新定义ng-model的值。在这里,ng-model等于m.id,当ng-model发生改变的时候,得到的是m.id的值

参考

  1. http://docs.angularjs.org/api/ng.directive:select
  1. http://blog.miniasp.com/post/2013/05/12/AngularJS-ng-module-select-ngOptions-usage-samples.aspx

♦ 本文固定连接:http://gsgundam.com/2014-10-11-angularjs-selecte-label-usage/

♦ 转载请注明:GSGundam 2014年10月11日发布于 GSGUNDAM砍柴工

友荐云推荐