首页 > 其他 > 详细

ng-options

时间:2015-02-25 22:14:41      阅读:529      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!