AngularJS 选择框 - 菜鸟教程

使用 ng-options 创建选择框

AngularJS 允许您基于数组或对象中的项目创建下拉列表。

如果要基于 AngularJS 中的对象或数组创建下拉列表，则应使用 ng-options 指令：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜鸟教程(cainiaoya.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<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 = ["Emil", "Tobias", "Linus"];
        });
    </script>
</body>
</html>

ng-options 与 ng-repeat

您还可以使用 ng-repeat 指令创建相同的下拉列表：

<select>
    <option ng-repeat="x in names">{{ x }}</option>
</select>

由于 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 指令有其局限性，所选值必须为字符串：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜鸟教程(cainiaoya.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <p>请选择你的汽车： </p>
    <div ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectedCar">
            <option ng-repeat="x in cars" value="{{x.model}}">{{ x.model }}</option>
        </select>
    <h1>你选择了: {{selectedCar}}</h1>
    </div> 
    
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.cars = [
                {model : "Ford Mustang", color : "red"},
                {model : "Fiat 500", color : "white"},
                {model : "Volvo XC90", color : "black"}
            ];
        });
    </script>
</body>
</html>

使用 ng-options 指令时，所选值可以是一个对象：

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>你选择了: {{selectedCar.model}}</h1>
<p>颜色: {{selectedCar.color}}</p>

当所选值可以是对象时，它可以容纳更多信息，并且您的应用程序可以更灵活。

在本教程中，我们将推荐使用 ng-options 指令。

数据源作为对象

在前面的示例中，数据源是一个数组，但是我们也可以使用一个对象。

假设您有一个具有键值对的对象：

$scope.cars = {
    car01 : "Ford",
    car02 : "Fiat",
    car03 : "Volvo"
};

ng-options 属性中的表达式对于对象有些不同。

使用对象作为数据源，x 代表键，y 代表值：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜鸟教程(cainiaoya.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <p>请选择你的汽车： </p>
    <div ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectedCar" ng-options="x for (x, y) in cars">
        </select>
    <h1>你选择了: {{selectedCar}}</h1>
    </div> 
  
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.cars = {
                car01 : "Ford",
                car02 : "Fiat",
                car03 : "Volvo"
            }
        });
    </script>
</body>
</html>

所选值将始终是键值对中的值。

键值对中的值也可以是一个对象。

所选的值仍是键值对中的值，只是这次是对象：

$scope.cars = {
    car01 : {brand : "Ford", model : "Mustang", color : "red"},
    car02 : {brand : "Fiat", model : "500", color : "white"},
    car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

下拉列表中的选项不必是键值对中的键，也可以是值或值对象的属性：

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>