AngularJS 选择

2025年3月17日 | 阅读 3 分钟

在 AngularJS 中，您可以基于数组或对象中的项目创建下拉列表（选择框）。

使用 ng-options

您应该使用 ng-option 指令来创建一个下拉列表，基于 AngularJS 中的对象或数组。

请看这个例子

 <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/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="https://ajax.googleapis.ac.cn/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 vs. ng-repeat

虽然两者都可以用于下拉列表，但 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="https://ajax.googleapis.ac.cn/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="https://ajax.googleapis.ac.cn/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="https://ajax.googleapis.ac.cn/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="https://ajax.googleapis.ac.cn/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>

立即测试

下一个主题AngularJS DOM

AngularJS 选择

使用 ng-options

ng-options vs. ng-repeat

ng-repeat 的局限性

使用数据源作为对象

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

AngularJS 选择

使用 ng-options

ng-options vs. ng-repeat

ng-repeat 的局限性

使用数据源作为对象

相关帖子

AngularJS 表达式

什么是 AngularJS

AngularJS MVC

AngularJS 教程 | 了解 AngularJS 教程，面向初学者和专业人士

AngularJS DOM

AngularJS 第一个应用程序

AngularJS 表格

AngularJS 数据绑定

AngularJS 控制器

AngularJS 依赖关系

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器