个性化阅读
专注于IT技术分析

angularjs选择

本文概述

在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>
赞(0)
未经允许不得转载:srcmini » angularjs选择
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!