Festlegen von Werten in ng-options für AngularJS

Mit der ng-options-Direktive von AngularJS können Entwickler Optionen für ein -Tag füllen. Eine häufig gestellte Frage ist, wie das Wertattribut für jede Option festgelegt wird.

Um den Werteinstellungsmechanismus zu verstehen, schauen wir uns die Syntax von ngOptions an. Es nimmt einen Ausdruck in einer dieser Formen an:

Für Arrays:

label for value in array

Für Objekte:

label for (key, value) in object

Betrachten Sie das folgende Beispielarray:

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

Um die Optionen mit ng-options zu füllen, können wir schreiben:

In diesem Fall bestimmt obj.value den ausgewählten Wert für jede Option.

Update: Track-by-Value-Ausdruck

Mit den letzten AngularJS-Updates ist es jetzt möglich, den Wert für das Wertattribut mithilfe eines Track-by-Ausdrucks explizit anzugeben:

Syntax merken

Die ngOptions-Syntax kann schwierig zu merken sein. Eine hilfreiche Analogie besteht darin, es sich als eine erweiterte Version von Pythons Listenverständnissen vorzustellen:

[x**2 for x in [1, 2, 3, 4, 5]]

Allerdings In ng-options unterscheiden wir zwischen dem Wert und dem für jede Option angezeigten Text mithilfe des Schlüsselworts as:

person.id as person.name for person in people

Für JavaScript-Objekte Die Syntax ist ähnlich und verwendet (Schlüssel-Wert-)Paare:

for (key, value) in object