定义和用法
ng-options 可以使数组或对象来生成一个<select>
中的<option>
列表。
当select中一个选项被选择,该选项将会被绑定到ng-model。
除了ng-options 指令外,还可以使用 ng-repeat 来替代。
使用情景
ng-options 如何遍历对象我不清楚,主要还是作用与数组。
后台将一个List<DTO对象>
以json的形式传到前台,通过回调函数得到的就是一个数组对象。这时候 ng-options 就派上用场了。
具体使用
html
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="item.code as item.message for item in names" ng-change="change()">
<option value="">请选择</option>
</select>
</div>
注:<select>
是可以有默认值的,如<option value="">请选择</option>
, 但前提是value必须等于"",不可以有任何值。
controller
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [
{message:"Emil", code:1},
{message:"Tobias", code:2},
{message:"Linus", code:3}
];
$scope.change = function(){
console.log("value="+$scope.selectedName);
}
});
详解
首先,ng-options="item.code as item.message for item in names"
表示遍历$scope.names数组,得到每个item对象;
然后,item.code作为option的value,item.message作为option的text.
而ng-model, 其实就是option的value.