AngularJS 下拉框

AngularJS 允许您基于数组或对象中的项目创建下拉列表。

使用 ng-options 创建下拉框

如果您想在 AngularJS 中基于对象或数组创建下拉列表，应该使用 ng-options 指令：

Esempio

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

Prova Personalmente

ng-options 与 ng-repeat

您也可以使用 ng-repeat 指令来创建相同的下拉列表：

Esempio

<select>
  <option ng-repeat="x in names">{{x}}</option>
</select>

Prova Personalmente

由于 ng-repeat 指令为数组中的每个项目重复一段 HTML 代码，因此它可用于在下拉列表中创建选项，但是 ng-options 指令是专门为下拉列表填充选项而设计的。

应该使用哪一个？

您可以使用 ng-repeat 指令和 ng-options 指令：

Supponiamo di avere un array di oggetti:

$scope.cars = [
  {model : "Ford Mustang", color : "red"},
  {model : "Fiat 500", color : "white"},
  {model : "Volvo XC90", color : "black"}
];

Esempio

Utilizzare ng-repeat：

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

Prova Personalmente

Quando si utilizza un valore come oggetto, utilizzare ng-value con value：

Esempio

Sostituisci ng-repeat Usato come oggetto:

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

Prova Personalmente

Esempio

Utilizzare ng-options：

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Selezionato: {{selectedCar.model}}</h1>
<p>Il suo colore è: {{selectedCar.color}}</p>

Prova Personalmente

Quando il valore selezionato è un oggetto, può contenere più informazioni e la tua applicazione può essere più flessibile.

Utilizzeremo in questa guida: ng-options direttiva.

Come sorgente dati dell'oggetto

Nell'esempio precedente, il sorgente dati era un array, ma possiamo anche utilizzare un oggetto.

Supponiamo di avere un oggetto con coppie chiave-valore:

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

ng-options L'espressione dell'attributo è leggermente diversa per l'oggetto:

Esempio

Utilizzare un oggetto come sorgente dati,x Rappresenta la chiave,y Rappresenta il valore:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>Selezionato: {{selectedCar}}</h1>

Prova Personalmente

Il valore selezionato sarà sempre nella coppia chiave-valoreValore.

nella coppia chiave-valoreValorepuò anche essere un oggetto:

Esempio

Il valore selezionato rimarrà ancora nella coppia chiave-valoreValore, ma questa volta è un oggetto:

$scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "rosso"},
  car02 : {brand : "Fiat", model : "500", color : "bianco"},
  car03 : {brand : "Volvo", model : "XC90", color : "nero"}
};

Prova Personalmente

Le opzioni della lista a discesa non devono essere un paio di chiave-valoreChiave, può essere anche un valore, o un attributo dell'oggetto valore:

Esempio

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

Prova Personalmente