AngularJS Select(选择框)

使用 ng-options 创建选择框

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:
实例

<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 = ["Google", "Runoob", "Taobao"];
});
</script>

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 是一个字符串。

ng-repeat 有局限性，选择的值是一个字符串:
实例
使用 ng-r
{{x.site}}

</select>>的是: {{selectedSite}}

尝试一下 »
使用 ng-options 指令，选择的值是一个对象：
实例
使用 ng-options:

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

你选择的是: {{selectedSite.site}}
网址为: {{selectedSite.url}}