Viele Entwickler haben Schwierigkeiten beim Festlegen der Value-Eigenschaft, wenn sie die ng-Optionen verwenden Direktive in AngularJS. Hier finden Sie eine ausführliche Erklärung zur Behebung dieses Problems.
Mit der ng-options-Direktive können Sie ein
ng-options="{expression_for_value} as {expression_for_label} for {expression_for_items_in_source}Im bereitgestellten Beispiel ist „resultOptions“ ein Array von Objekten, die Folgendes enthalten: Wenn Sie sowohl die Eigenschaften „value“ als auch „text“ verwenden, würden Sie diese Syntax verwenden:
ng-options="obj.value as obj.text for obj in resultOptions"
Dies führt zu Optionen mit „obj.value“ als entsprechenden Werten und „obj.text“ als angezeigten Beschriftungen .
Update: Neuere Versionen von AngularJS ermöglichen es Ihnen, den Wert explizit mithilfe des „Track by“-Ausdrucks zu definieren:
ng-options="obj.text for obj in array track by obj.value"
Verstehen der Syntax:
Bedenken Sie die Syntax, indem Sie Parallelen zum Listenverständnis von Python ziehen. Im folgenden Python-Beispiel stellen die „x2“-Werte die ausgewählten Werte dar, und die Werte in der Liste stellen die angezeigten Beschriftungen dar:
my_list = [x**2 for x in [1, 2, 3, 4, 5]] > [1, 4, 9, 16, 25]
In den AngularJS-Auswahloptionen haben wir Unterscheiden Sie zwischen „Wert“ für die Codelogik und „Text“ für Anzeigezwecke. Hier kommt das Schlüsselwort „as“ ins Spiel:
person.id as person.name for person in people
In diesem Beispiel stellt „person.id“ den ausgewählten Wert dar, während „person.name“ die angezeigte Bezeichnung ist. Ebenso dekonstruieren Sie Elemente für JavaScript-Objekte mithilfe von „(Schlüssel, Wert)“-Paaren.
Wenn Sie diese Nuancen verstehen, können Sie Optionswerte in den ng-Optionen von AngularJS effektiv festlegen.
Das obige ist der detaillierte Inhalt vonWie legen Sie Optionswerte in den ng-Optionen von AngularJS fest, wenn Ihre Datenquelle keine explizite Werteigenschaft hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
