AngularJS Select Boxes
AngularJS 可以讓你基於陣列或物件中的項來建立下拉列表。
使用 ng-options 建立選擇框
如果你想在 AngularJS 中建立基於物件或陣列的下拉列表，你應該使用 ng-options 指令。
示例
<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>
自己動手試一試 »
ng-options vs ng-repeat
你也可以使用 ng-repeat 指令來建立相同的下拉列表。
因為 ng-repeat 指令會為陣列中的每個項重複一段 HTML 程式碼，所以它可以用來建立下拉列表中的選項，但 ng-options 指令是專門為填充下拉列表選項而設計的。
我應該使用哪個？
你可以同時使用 ng-repeat 指令和 ng-options 指令。
假設你有一個物件陣列
$scope.cars = [
{model : "Ford Mustang", color : "red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
示例
使用 ng-repeat
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>你選擇了：{{selectedCar}}</h1>
自己動手試一試 »
當 value 是一個物件時，請使用 ng-value 而不是 value。
示例
使用 ng-repeat 作為物件
<select ng-model="selectedCar">
<option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>你選擇了一個 {{selectedCar.color}} {{selectedCar.model}}</h1>
自己動手試一試 »
示例
使用 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 代表值。
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>你選擇了：{{selectedCar}}</h1>
自己動手試一試 »
選定的值將始終是鍵值對中的值。
鍵值對中的值也可以是一個物件。
示例
選定的值仍然是鍵值對中的值，只是這次它是一個物件。
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
自己動手試一試 »
下拉列表中的選項不一定必須是鍵值對中的鍵，它也可以是值，或者值物件的某個屬性。
