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