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 track by obj.id 

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

更新 2015-07-08 : track by obj.id 很重要，有一个primary key 做标准， angular才容易识别出准确的对象，angular 会用这个 pk 来做对比识别。

更新 2015-10-01 : track by obj.id 和 obj.id as 不要一起使用，angular会优先用 track by 来匹配model, 如果你的track by 和 as 用的表达式不同会出现你不希望看到的情况哦！

 

好了基本上就是这样了。记得不要用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

 

更新：２０１５－０７－２１

1.4版本后 <option> 的value 会被加上类型，比如 : string:xinyao 

如果我们要用到一些jquery的话要特别注意这个小坑哦！ 

 

更新 : 2015-07-24

有时我们会希望angularjs 和我们之前的 jQuery select plugin 做结合.

这里有3个步骤要注意 : 

1. ng-options compile & digest 完了之后，我们要调用 jQuery plugin 

2. 当 ng-options change or ngModel change 时，我们也要挑用 jQuery plugin ( ng-options change 时，angular 会调用 ngModel.$render 方法哦 )

3.当 jQuery on change 时，我们要 set view value ( 有些jQuery 会trigger 原本的 select ，那么我们就不需要写这个了)

 

.directive('tagSelect', function () {
    return {
        restrict: 'A',
        require: "ngModel",
        //priority: 1,
        link: function (scope, element, $attr, ngModel) {
            if (element[0]) {
                setTimeout(function () { //要settimeout 等 degist完elem出来了才能调用jQuery
　　　　　　　　　　　 //call jQuery
                    element.chosen({
                        width: '100%',
                        allow_single_deselect: true
                    });
                }, 100);
            }
　　　　　　　//这里settimeout 是因为我们要拦截 $render 
　　　　　　　//angular 之允许我们写一个 $render ， 而 ng-options 本身是会填充掉这个$render方法的，所以我们要缓存它的，然后再重写我们自己的 
            setTimeout(function () {
                var originRender = ngModel.$render;
                ngModel.$render = function () {                     
                    originRender();
                    setTimeout(function () {
                        element.trigger('chosen:updated'); //call jQuery
                    });
                }
            });             
        }
    }
})