AngularJS:select指令用法詳解

select指令是 AngularJS 預(yù)設(shè)的一組directive。這里是AngularJS官網(wǎng)給出的用法： AngularJS:select

大概的意思是，select中的ngOption可以采用和ngRepeat指令類似的循環(huán)結(jié)構(gòu)，其數(shù)據(jù)源可以是Array或者是Object。針對(duì)兩種數(shù)據(jù)源又可以衍生出好幾種用法。

但是官網(wǎng)給出的例子太少了。

下面是針對(duì)幾個(gè)不太容易理解的用法示例。

先上Controller

function selectCtrl($scope) {
    $scope.selected = '';
    $scope.model = [{
        id: 10001,
        mainCategory: '男',
        productName: '水洗T恤',
        productColor: '白'
    }, {
        id: 10002,
        mainCategory: '女',
        productName: '圓領(lǐng)短袖',
        productColor: '黑'
    }, {
        id: 10003,
        mainCategory: '女',
        productName: '短袖短袖',
        productColor: '黃'
    }];
}

示例

示例一：基本下拉效果

usage:
label for value in array

<select ng-model="selected" ng-options="m.productName for m in model">
    <option value="">-- 請(qǐng)選擇 --</option>
</select>

效果

說(shuō)明

1. usage 中的value也就是ng-options中的m，而m是數(shù)組model的一個(gè)元素，它是一個(gè)變量
2. usage 中的label也就是ng-options中的m.productName，其實(shí)就是一個(gè)AngularJS Expression

示例二：自定義下拉顯示名稱

usage
label for value in array

<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) for m in model">
    <option value="">-- 請(qǐng)選擇 --</option>
</select>

效果

說(shuō)明

1. 可以看到，usage 中的label可以根據(jù)需求拼接出不同的字符串

示例三：讓選項(xiàng)分組

usage
label group by groupName for value in array

<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) group by m.mainCategory for m in model">
    <option value="">-- 請(qǐng)選擇 --</option>
</select>

效果

說(shuō)明

1. 這里使用了group by，通過(guò)$scope.model中的mainCategory字段進(jìn)行分組

示例四：自定義ngModel的綁定

usage
select as label for value in array

<select ng-model="selected" ng-options="m.id as m.productName for m in model">
    <option value="">-- 請(qǐng)選擇 --</option>
</select>

效果

說(shuō)明

1. 這種用法也是select指令中較為復(fù)雜的一種。從效果中可以看出，usage 中select的作用就是重新綁定ng-model的值。在這里，ng-model等于m.id，當(dāng)ng-model發(fā)生改變的時(shí)候，得到的實(shí)際值是m.id的值。