先定义一些数据以便说明问题
function selectCtrl($scope) {
$scope.selected = '';
$scope.model = [{
id: 10001,
mainCategory: '男',
productName: '水洗T恤',
productColor: '白'
}, {
id: 10002,
mainCategory: '女',
productName: '圆领短袖',
productColor: '黑'
}, {
id: 10003,
mainCategory: '女',
productName: '短袖短袖',
productColor: '黃'
}];
1、基本用法
<select ng-model="selected"
ng-options="m.productName for m in model">
<option value="">-- 请选择 --</option>
</select>
2、拼接属性值,让选项看上去更生动
<select ng-model="selected"
ng-options="(m.productColor + ' - ' + m.productName) for m in model">
<option value="">-- 请选择 --</option>
</select>
3、分组显示选项,更直观
<select ng-model="selected"
ng-options="(m.productColor + ' - ' + m.productName) group by m.mainCategory for m in model">
<option value="">-- 请选择 --</option>
</select>
4、用 as 来定义绑定selected的具体值(前三种绑定的model中的一条记录,这里selected绑定的是id)
<select ng-model="selected"
ng-options="m.id as m.productName for m in model">
<option value="">-- 请选择 --</option>
</select>