angular的ng-options




原文地址：


http://my.oschina.net/gejiawen0913/blog/188539#OSC_h2_1






select 是 AngularJS 預設的一組directive。下面是其官網api doc給出的用法：AngularJS:select

大意是，select中的ngOption可以採用和ngRepeat指令類似的循環結構，其data source可以是array或者是object。針對兩種data source又有衍生的好幾種用法。但是官網的例子實在是太少了。

下面是針對幾個不太容易理解的用法的例子。

先上controller

<!-- lang: js -->
function selectCtrl($scope) {
    $scope.selected = '';

    $scope.model = [{
        id: 10001,
        mainCategory: '男',
        productName: '水洗T恤',
        productColor: '白'
    }, {
        id: 10002,
        mainCategory: '女',
        productName: '圓領短袖',
        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="">-- 請選擇 --</option></select>

效果:

說明

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

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

usage: label for value in array

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

效果

說明

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

實例三： 讓選項分組

usage: label group by group for value in array

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

效果

說明

1. 這裏使用了group by，通過$scope.model中的mainCategory字段進行分組

實例四：自定義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="">-- 請選擇 --</option></select>

效果

說明

1. 這種用法也是select指令最複雜的一種。從效果中可以看出，usage中select的作用就是重新定義ng-model的值。在這裏，ng-model等於m.id，當ng-model發生改變的時候，得到的是m.id的值

select 是 AngularJS 預設的一組directive。下面是其官網api doc給出的用法：AngularJS:select

大意是，select中的ngOption可以採用和ngRepeat指令類似的循環結構，其data source可以是array或者是object。針對兩種data source又有衍生的好幾種用法。但是官網的例子實在是太少了。

下面是針對幾個不太容易理解的用法的例子。

先上controller

<!-- lang: js -->
function selectCtrl($scope) {
    $scope.selected = '';

    $scope.model = [{
        id: 10001,
        mainCategory: '男',
        productName: '水洗T恤',
        productColor: '白'
    }, {
        id: 10002,
        mainCategory: '女',
        productName: '圓領短袖',
        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="">-- 請選擇 --</option></select>

效果:

說明

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

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

usage: label for value in array

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

效果

說明

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

實例三： 讓選項分組

usage: label group by group for value in array

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

效果

說明

1. 這裏使用了group by，通過$scope.model中的mainCategory字段進行分組

實例四：自定義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="">-- 請選擇 --</option></select>

效果

說明

1. 這種用法也是select指令最複雜的一種。從效果中可以看出，usage中select的作用就是重新定義ng-model的值。在這裏，ng-model等於m.id，當ng-model發生改變的時候，得到的是m.id的值