AngularJS Select(选择框)_编程设计

1.　　AngularJS 可以使用数组或对象创建一个下拉列表选项。使用 ng-options 指令来创建一个下拉列表，列表项通过对象和数组循环输出，代码如下：

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title></title> 
        <script type="text/javascript" src="js/angular-1.3.15.min.js"></script> 
    </head> 
    <body> 
        <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义，在这个div内运行--> 
            <select ng-init="selectName = names[0]" ng-model="selectName" ng-options="x for x in names"></select> 
        </div> 
     
        <script> 
            var app = angular.module("myApp", []); 
            app.controller('myCtrl', function($scope) { /*myCtrl是一个JavaScript函数*/ 
                $scope.names = ["苹果", "橘子", "香蕉"]; 
            }); 
        </script> 
    </body> 
</html>

2.　　ng-options 和 ng-repeat：ng-repeat 指令也可以创建下拉框列表，但是使用的方式是通过数组来循环 HTML 代码。但是使用 ng-options 更加适合创建下拉框列表，使用 ng-options 选择的是一个对象，使用 ng-repeat 选择的值是一个字符串。下面使用的是对象，不是数组，这样的话只用ng-options就更加方便。

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title></title> 
        <script type="text/javascript" src="js/angular-1.3.15.min.js"></script> 
    </head> 
    <body> 
        <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义，在这个div内运行--> 
            <select ng-init="selectName = names.stu01" ng-model="selectName" ng-options="x for (x,y) in names"></select> 
             
            <h1>你选择的是: {{selectName.name}}</h1> 
            <h2>班级: {{selectName.class}}</h2> 
        </div> 
     
        <script> 
            var app = angular.module("myApp", []); 
            app.controller('myCtrl', function($scope) { /*myCtrl是一个JavaScript函数*/ 
                $scope.names = { 
                    stu01:{name:'小红', class:'一班'}, 
                    stu02:{name:'小明', class:'二班'}, 
                    stu03:{name:'小方', class:'三班'} 
                }; 
            }); 
        </script> 
    </body> 
</html>

本文参考链接：https://www.cnblogs.com/wgl1995/p/6265376.html