AngularJS Select

AngularJS kann Arrays oder Objekte verwenden, um Optionen für Dropdown-Listen zu erstellen.

Verwenden Sie ng-options, um ein Auswahlfeld zu erstellen

In AngularJS können wirng-optionDie Direktive wird verwendet, um eine Dropdown-Liste zu erstellen, und die Listenelemente werden durch Durchlaufen von Objekten und Arrays generiert, wie im folgenden Beispiel:

Beispiel

<div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" 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 = ["Google", "Example", "Taobao"]; }); </script>

Selbst ausprobieren »

ng-init zum Festlegen des standardmäßig ausgewählten Werts.

ng-options und ng-repeat

Wir können auch dieng-repeatDirektive verwenden, um eine Dropdown-Liste zu erstellen:

Beispiel

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

Selbst ausprobieren »

ng-repeatDie Direktive durchläuft Arrays mit HTML-Code, um Dropdown-Listen zu erstellen, aberng-optionsdie Direktive ist besser geeignet, um Dropdown-Listen zu erstellen, und sie hat die folgenden Vorteile:

Verwendungng-optionsdie Option ist ein Objekt,ng-repeatist eine Zeichenkette.

Welche sollte besser verwendet werden?

Angenommen, wir verwenden das folgende Objekt:

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "Example", url : "http://www.example.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

ng-repeatEs gibt Einschränkungen, der ausgewählte Wert ist eine Zeichenkette:

Beispiel

Verwendungng-repeat:

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>Sie haben ausgewählt:{{selectedSite}}</h1>

Selbst ausprobieren »

Verwendungng-optionsDirektive, der ausgewählte Wert ist ein Objekt:

Beispiel

Verwendungng-options:

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>Sie haben ausgewählt:{{selectedSite.site}}</h1>
<p>Die URL ist:{{selectedSite.url}}</p>

Selbst ausprobieren »

Wenn der ausgewählte Wert ein Objekt ist, können wir mehr Informationen erhalten, und die Anwendung ist flexibler.

Die Datenquelle ist ein Objekt

In den vorherigen Beispielen haben wir ein Array als Datenquelle verwendet; unten verwenden wir ein Datenobjekt als Datenquelle.

$scope.sites = {
    site01 : "Google",
    site02 : "Example",
    site03 : "Taobao"
};

ng-optionsDie Verwendung von Objekten macht einen großen Unterschied, wie unten gezeigt:

Beispiel

Ein Objekt als Datenquelle verwenden,xals Schlüssel,yals Wert:

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

<h1>Der Wert, den Sie ausgewählt haben, ist:{{selectedSite}}</h1>

Selbst ausprobieren »

Der von Ihnen ausgewählte Wert befindet sich im Schlüssel-Wert-Paar, genauer imWert。

Wertin Schlüssel-Wert-Paar, er kann auch ein Objekt sein:

Beispiel

Der ausgewählte Wert befindet sich im Schlüssel-Wertdes PaarsWert-Paar, in diesem Fall ist er ein Objekt:

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

Selbst ausprobieren »

Im Dropdown-Menü können Sie auch nichtkeyim -Wert-Paarkeyverwenden und direkt die Eigenschaften des Objekts nutzen:

Beispiel

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

Selbst ausprobieren »
Weitere Erweiterungen