AngularJS Select Boxes
AngularJS 可以让你基于数组或对象中的项来创建下拉列表。
使用 ng-options 创建选择框
如果你想在 AngularJS 中创建基于对象或数组的下拉列表，你应该使用 ng-options 指令。
示例
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
自己动手试一试 »
ng-options vs ng-repeat
你也可以使用 ng-repeat 指令来创建相同的下拉列表。
因为 ng-repeat 指令会为数组中的每个项重复一段 HTML 代码，所以它可以用来创建下拉列表中的选项，但 ng-options 指令是专门为填充下拉列表选项而设计的。
我应该使用哪个？
你可以同时使用 ng-repeat 指令和 ng-options 指令。
假设你有一个对象数组
$scope.cars = [
{model : "Ford Mustang", color : "red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
示例
使用 ng-repeat
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>你选择了：{{selectedCar}}</h1>
自己动手试一试 »
当 value 是一个对象时，请使用 ng-value 而不是 value。
示例
使用 ng-repeat 作为对象
<select ng-model="selectedCar">
<option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>你选择了一个 {{selectedCar.color}} {{selectedCar.model}}</h1>
自己动手试一试 »
示例
使用 ng-options
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>你选择了：{{selectedCar.model}}</h1>
<p>它的颜色是：{{selectedCar.color}}</p>
自己动手试一试 »
当选定的值是对象时，它可以包含更多信息，并且你的应用程序会更灵活。
本教程将使用 ng-options 指令。
数据源为对象
在前面的例子中，数据源是数组，但我们也可以使用对象。
假设你有一个键值对对象
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
ng-options 属性中的表达式对于对象略有不同。
示例
当使用对象作为数据源时，x 代表键，y 代表值。
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>你选择了：{{selectedCar}}</h1>
自己动手试一试 »
选定的值将始终是键值对中的值。
键值对中的值也可以是一个对象。
示例
选定的值仍然是键值对中的值，只是这次它是一个对象。
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
自己动手试一试 »
下拉列表中的选项不一定必须是键值对中的键，它也可以是值，或者值对象的某个属性。
