AngularJS-Auswahlfelder
Mit AngularJS können Sie Dropdown-Listen basierend auf Elementen in einem Array oder einem Objekt erstellen.
Erstellen einer Auswahlbox mit ng-options
Wenn Sie eine Dropdown-Liste basierend auf einem Objekt oder einem Array in AngularJS erstellen möchten, sollten Sie die ng-optionsDirektive verwenden:
Beispiel
<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>
of-options vs. of-repeat
Sie können auch die ng-repeatDirektive verwenden, um dieselbe Dropdown-Liste zu erstellen:
Beispiel
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
Da die ng-repeatDirektive einen HTML-Code-Block für jedes Element in einem Array wiederholt, kann sie zum Erstellen von Optionen in einer Dropdown-Liste verwendet werden, aber die ng-optionsDirektive wurde speziell zum Füllen einer Dropdown-Liste mit Optionen erstellt.
Was verwende ich?
Sie können sowohl die ng-repeatDirektive als auch die ng-optionsDirektive verwenden:
Angenommen, Sie haben ein Array von Objekten:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
Beispiel
Verwendung ng-repeat:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Wenn Sie den Wert als Objekt verwenden, verwenden ng-valueSie anstelle von value:
Beispiel
Verwendung ng-repeatals Objekt:
<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>
Beispiel
Verwendung 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>
Wenn der ausgewählte Wert ein Objekt ist, kann er mehr Informationen enthalten und Ihre Anwendung kann flexibler sein.
Wir werden die ng-optionsDirektive in diesem Tutorial verwenden.
Die Datenquelle als Objekt
In den vorherigen Beispielen war die Datenquelle ein Array, aber wir können auch ein Objekt verwenden.
Angenommen, Sie haben ein Objekt mit Schlüssel-Wert-Paaren:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
Der Ausdruck im ng-optionsAttribut ist bei Objekten etwas anders:
Beispiel
Die Verwendung eines Objekts als Datenquelle xstellt den Schlüssel dar und
y
stellt den Wert dar:
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
Der ausgewählte Wert ist immer der Wert in einem Schlüssel - Wert -Paar.
Der Wert in einem Schlüssel - Wert -Paar kann auch ein Objekt sein:
Beispiel
Der ausgewählte Wert ist immer noch der Wert in einem Schlüssel - Wert -Paar, nur dass es diesmal ein Objekt ist:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Die Optionen in der Dropdown-Liste müssen nicht der Schlüssel in einem Schlüssel -Wert-Paar sein, es kann auch der Wert oder eine Eigenschaft des Wertobjekts sein:
Beispiel
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>