angular select中ng-options使用

 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。

以后总会用到的！！ 

 

查看更多关于angular select中ng-options使用的详细内容...