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>