AngularJS 选择框



  • 使用 ng-options 创建选择框

    AngularJS 允许您基于数组或对象中的项目创建下拉列表。
    如果要基于 AngularJS 中的对象或数组创建下拉列表,则应使用 ng-options 指令:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.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>蝴蝶教程(jc2182.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>蝴蝶教程(jc2182.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>