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}}