ng-options

标签：

ng-options + select 就是 angular 的 DDL (drop down list) 了。

   <div ng-app="app" ng-controller="ctrl">
        select value : {{ selectedValue }}        
        <select ng-model="selectedValue" ng-options="obj.name for obj in array">
            <option value="" >select</option>
        </select>
    </div>

    var app = angular.module("app", []);
    app.controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) {
        $scope.array = [{
            id: 5,
            name: "keatkeat",
            group: "A",
            subData: {value : "subKeatkeat"}
        },
        {
            id: 6,
            name: "xinyao",
            group: "B",
            subData: { value: "subXinyao" }
        }];
        $scope.selectedValue = $scope.array[0];
    }]);

这里给的例子是 array 内包含obj 

关键在 obj.name for obj in array 这句表达式. 

obj in array 是我们常看到的 ng-repeat 的形式 , array 是一个$scope.array . obj 只是一个随意的var 

obj.name for 表示 view 将显示name这个属性值, 也就是每一个 option elem 的 text 

selectedValue 是array中的一个obj . (这里要注意，这个obj是"引用"哦)

我们知道 html 的 select 是可以group 的。在angular 要实现的话，我们可以修改上面的表达式 

obj.name group by obj.group for obj in array 

关键就是 group by obj.group 

一般上 selectValue 返回的都是一整个obj , 那么如果我们希望只返回obj中的一个属性值的话。

obj.id as obj.name group by obj.group for obj in array 

obj.id as 就表示了我们最终的 selectedValue 只是要 id 这个属性值. (如果是这样的话，我们如果想通过 model 来修改 view 的话，我们要写入的也是 id 而不是对象哦)

好了基本上就是这样了。记得不要用ng-repeat来实现 options ，应该用 ng-options来实现 (性能更好)

ng-options 也支持 track by , 关于track by 可以看下面 (track by 是ng-repeat的功能，好处是可以提高性能，原理大概是我们自定义一个 primary key)

http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

ng-options

标签：

原文地址：http://www.cnblogs.com/keatkeat/p/4300305.html