AngularJS Dropdown-Liste

AngularJS ermöglicht es Ihnen, Dropdown-Listen basierend auf Elementen in Arrays oder Objekten zu erstellen.

Dropdown-Liste mit ng-options erstellen

Wenn Sie in AngularJS eine Dropdown-Liste basierend auf einem Objekt oder einem Array erstellen möchten, sollten Sie ng-options Anweisung:

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>

Versuchen Sie es selbst

ng-options mit ng-repeat

Sie können auch ng-repeat Anweisung, um eine identische Dropdown-Liste zu erstellen:

Beispiel

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

Versuchen Sie es selbst

Da ng-repeat Die Anweisung wiederholt einen HTML-Code für jedes Element im Array, daher kann sie verwendet werden, um Optionen in Dropdown-Listen zu erstellen, aber ng-options Die Anweisung ist speziell für die Füllung von Optionsfeldern in Dropdown-Listen entworfen.

Welche sollte verwendet werden?

Sie können verwenden ng-repeat Anweisung und ng-options Anweisung:

Angenommen, Sie haben eine Objektliste:

$scope.cars = [
  {model : "Ford Mustang", color : "rot"},
  {model : "Fiat 500", color : "weiß"},
  {model : "Volvo XC90", color : "schwarz"}
];

Beispiel

Verwenden Sie ng-repeat：

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>Sie haben ausgewählt: {{selectedCar}}</h1>

Versuchen Sie es selbst

Wenn Sie den Wert als Objekt verwenden, verwenden Sie ng-value statt value：

Beispiel

ersetzt ng-repeat Verwendet als Objekt:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>Sie haben eine {{selectedCar.color}} {{selectedCar.model}} ausgewählt</h1>

Versuchen Sie es selbst

Beispiel

Verwenden Sie ng-options：

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Sie haben ausgewählt: {{selectedCar.model}}</h1>
<p>Seine Farbe ist: {{selectedCar.color}}</p>

Versuchen Sie es selbst

Wenn der gewählte Wert ein Objekt ist, kann es mehr Informationen enthalten und Ihre Anwendung kann flexibler sein.

Wir werden in diesem Tutorial ng-options Anweisung.

Als Datenquelle für ein Objekt

Im obigen Beispiel 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"
};

ng-options Der Ausdruck im Attribut ist für Objekte etwas anders:

Beispiel

Verwenden Sie ein Objekt als Datenquelle,x darstellt den Schlüssel,y Stellt den Wert dar:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>Sie haben ausgewählt: {{selectedCar}}</h1>

Versuchen Sie es selbst

Der gewählte Wert wird stets der Wert des Schlüssel-Wert-Paares seinWert.

im Schlüssel-Wert-PaarWertkann auch ein Objekt sein:

Beispiel

Der gewählte Wert wird immer der Wert des Schlüssel-Wert-Paares seinWertnur diesmal ist es ein Objekt:

$scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "rot"},
  car02 : {brand : "Fiat", model : "500", color : "weiß"},
  car03 : {brand : "Volvo", model : "XC90", color : "schwarz"}
};

Versuchen Sie es selbst

Die Optionen in der Dropdown-Liste müssen nicht in den Schlüssel-Wert-Paaren seinSchlüsselkann auch ein Wert oder ein Attribut eines Wertobjekts sein:

Beispiel

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

Versuchen Sie es selbst