srcmini本文概述
在AngularJS中，你可以基于数组或对象中的项目创建下拉列表（选择框）。
使用ng-options
你应该使用ng-option指令基于AngularJS中的对象或数组创建下拉列表。
请参阅以下示例：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<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 = ["Java", "PHP", ".Net", "AngularJS", "C/C++"];
});
</script>
</body>
</html>注意：
你还可以使用ng-repeat指令来制作与ng-options相同的下拉列表。
请参阅以下示例：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Java", "PHP", ".Net", "AngularJS", "C/C++"];
});
</script>
<p>The same example of dropdown list using the ng-repeat directive.</p>
</body>
</html>ng-options与重复
虽然，两者都可以用于下拉列表，但是ng-repeat指令为数组中的每个项目重复一段HTML代码，但可以用于在下拉列表中创建选项，而ng-options指令专门用于用选项填充下拉列表，并且至少具有一个重要优点：
使用ng-options进行的下拉列表允许所选值成为对象，而使用ng-repeat进行的下拉列表则必须是字符串。
考虑你有一个对象数组：
$scope.cars = [
{model : "Ford Mustang", color : "red"}, {model : "Fiat 500", color : "white"}, {model : "Volvo XC90", color : "black"}
];ng-repeat的局限性
ng-repeat指令有一个限制，即所选值必须是字符串：
请参阅以下示例：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a car:</p>
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = [
{model : "Ford", color : "red"}, {model : "Honda", color : "white"}, {model : "Volvo", color : "black"}, {model : "Hundai", color : "gray"}
];
});
</script>
</body>
</html>使用ng-options指令时，可以选择一个对象值：
请参阅以下示例：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a car:</p>
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>It's color is: {{selectedCar.color}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = [
{model : "Ford", color : "red"}, {model : "Honda", color : "white"}, {model : "Volvo", color : "black"}, {model : "Hundai", color : "gray"}
];
});
</script>
</body>
</html>使用数据源作为对象
我们还可以将数据源用作对象。
考虑到你的对象具有以下键值对：
$scope.cars = {
car01 : "Ford", car02 : "Honda", car03 : "Volvo", car03 : "Hundai", };ng-options属性中的表达式对于对象而言有些不同：
请参阅以下示例：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a car:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : "Ford", car02 : "Honda", car03 : "Volvo", car03 : "Hundai", }
});
</script>
</body>
</html>范例2：
所选值将始终是键值对中的值。
键值对中的值也可以是一个对象：
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"}, car02 : {brand : "Honda", model : "city", color : "white"}, car03 : {brand : "Volvo", model : "XC90", color : "black"}, car04 : {brand : "Hundai", model : "Creta", color : "gray"}
};请参阅以下示例：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a car:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar.brand}}</h1>
<h2>Model: {{selectedCar.model}}</h2>
<h3>Color: {{selectedCar.color}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"}, car02 : {brand : "Honda", model : "city", color : "white"}, car03 : {brand : "Volvo", model : "XC90", color : "black"}, car04 : {brand : "Hundai", model : "Creta", color : "gray"}
}
});
</script>
</body>
</html>
评论前必须登录！
注册