AngularJS können Sie auf Elemente in einem Array oder einem Objekt basierend Dropdown-Listen erstellen.
Erstellen einer Auswahlbox Mit ng-Optionen
Wenn Sie eine Dropdown - Liste erstellt werden soll, basierend auf einem Objekt oder einem Array in AngularJS, sollten Sie die Verwendung ng-option Richtlinie:
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>
Versuch es selber " ng-Optionen vs ng-repeat
Sie können auch die Verwendung ng-repeat - Direktive , um die gleiche Dropdown - Liste machen:
Da die ng-repeat - Richtlinie einen Block von HTML - Code für jedes Element in einem Array wiederholt, kann es verwendet werden , um Optionen in einer Dropdown - Liste zu erstellen, aber die ng-options Richtlinie wurde speziell für eine Dropdown - Liste mit Optionen Füllen und hat mindestens ein wichtiger Vorteil:
Dropdown - Listen , die mit ng-options ermöglicht es dem gewählten Wert ein Objekt zu sein, während Dropdown - Listen aus gemacht ng-repeat hat ein String sein.
Was verwende ich?
Angenommen, Sie haben eine Reihe von Objekten:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
]; Die ng-repeat - Richtlinie hat seine Grenzen, muss der ausgewählte Wert ein String sein:
Beispiel
Mit ng-repeat :
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Versuch es selber " Bei Verwendung der ng-options Richtlinie kann der ausgewählte Wert ein Objekt sein:
Beispiel
Mit ng-options :
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>It's color is: {{selectedCar.color}}</p>
Versuch es selber " Wann kann der ausgewählte Wert ein Objekt sein, kann es mehr Informationen halten, und Ihre Anwendung kann flexibler sein.
Wir werden die Verwendung ng-options Richtlinie in diesem Tutorial.
Die Datenquelle als Objekt
In den bisherigen Beispielen war die Datenquelle ein Array, aber wir können auch ein Objekt verwenden.
Angenommen, Sie ein Objekt mit Schlüssel-Wert-Paare haben:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
}; Der Ausdruck in der ng-options Attribut ist ein bisschen anders für Objekte:
Beispiel
Verwendung eines Objekts als Datenquelle, x stellt den Schlüssel und y repräsentiert den Wert:
<select ng-model="selectedCar" ng-options=" x for (x, y) in cars ">
</select>
<h1>You selected: {{selectedCar}}</h1>
Versuch es selber " Der gewählte Wert wird immer der Wert in einem Schlüssel- Wertepaar.
Der Wert in einem Schlüssel- Wertepaar kann auch ein Objekt sein:
Beispiel
Der gewählte Wert wird noch der Wert in einem Schlüssel- Wertepaar sein, nur dieses Mal ist es ein Ziel:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Versuch es selber " Die Optionen in der Dropdown - Liste hat nicht den Schlüssel in einem Schlüssel -Wertes Paar, es kann auch der Wert sein, oder eine Eigenschaft des Wertobjekt:
Beispiel
<select ng-model="selectedCar" ng-options=" y.brand for (x, y) in cars">
</select>
Versuch es selber "