AngularJS Select 选择框

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-init 设置默认选中值。


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-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>You selected: {{selectedCar}}</h1>
亲自试一试 »

When using the value as an object, use ng-value insead of value:

实例

使用 ng-repeat 指令,选择的值是一个对象:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>

<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>
亲自试一试 »

实例

使用 ng-options:

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>

<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>
亲自试一试 »

当选定值是对象时,它可以保存更多信息,并且应用程序可以更灵活。

在本教程中,我们将使用 ng-options 指令。



数据源为对象

前面实例我们使用了数组作为数据源,以下我们将数据对象作为数据源。

假设您有一个具有 key-value 键值对的对象:

$scope.cars = {
  car01 : "Ford",
  car02 : "Fiat",
  car03 : "Volvo"
};

对于对象,ng-options 属性中的表达式略有不同:

实例

使用对象作为数据源, x 为键(key),y 为值(value):

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>

<h1>You selected: {{selectedCar}}</h1>
亲自试一试 »

你选择的值为在 key-value 对中的 value

value 在 key-value 对中也可以是个对象:

实例

选择的值在 key-value 对的 value 中, 这是它是一个对象:

$scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "red"},
  car02 : {brand : "Fiat", model : "500", color : "white"},
  car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
亲自试一试 »

在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性:

实例

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>
亲自试一试 »