function selectCtrl($scope) {
$scope.selected = '';
$scope.model = [{
id: 10001,
mainCategory: '男',
productName: '水洗T恤',
productColor: '白'
}, {
id: 10002,
mainCategory: '女',
productName: '圆领短袖',
productColor: '黑'
}, {
id: 10003,
mainCategory: '女',
productName: '短袖短袖',
productColor: '黃'
}];
<select ng-model="selected" ng-options="m.productName for m in model">
<option value="">-- 请选择 --</option>
</select>
从这两段代码就能看出结果了,ng-options的值就可以当做英文意思来理解。m.productName属性来自m in model遍历。按照这种思路下面列出不同使用格式↓
<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) for m in model">
<option value="">-- 请选择 --</option>
</select>
遍历出两个属性值。
<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) group by m.mainCategory for m in model">
<option value="">-- 请选择 --</option>
</select>
通过遍历,进行分组显示。
<select ng-model="selected" ng-options="m.id as m.productName for m in model">
<option value="">-- 请选择 --</option>
</select>
这个比较难理解点,意思是通过遍历得到id,也就是界面显示的是m.productName值但是选中后输入框绑定到ng-model=”selsected”的值是m.id。
以后总会用到的!!