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。

以后總會用到的！！