AngularJS 选择框
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 与 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>You selected: {{selectedCar}}</h1>
亲自试一试 »
当使用值作为对象时，使用ng-value代替value:
示例
使用ng-repeat作为一个对象：
<select ng-model="selectedCar">
<option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>
亲自试一试 »
示例
使用ng-options:
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{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>You selected: {{selectedCar}}</h1>
亲自试一试 »
选定的值将始终是值在一个关键-值一对。
这个值在一个关键-值pair 也可以是一个对象：
示例
所选值仍将是值在一个关键-值对，只是这次它是一个对象：
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
亲自试一试 »
下拉列表中的选项不必是钥匙在一个钥匙-值对，也可以是值，或者值对象的属性：