angularjs选择 angularjs选择|AngularJS教程

本文概述

使用ng-options
ng-options与重复
ng-repeat的局限性
使用数据源作为对象

在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="http://www.srcmini.com/{{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"} };

【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"> < 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>