Wie legen Sie Optionswerte in den ng-Optionen von AngularJS fest, wenn Ihre Datenquelle keine explizite Werteigenschaft hat?

Bestimmen von Optionswerten in den ng-Optionen von AngularJS

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 -Feld dynamisch füllen. Optionen des Elements. Der „Wert“ für jede Option lässt sich normalerweise aus der Datenquelle ableiten. Wenn die Datenquelle jedoch keine explizite „Wert“-Eigenschaft bereitstellt, können Sie sie mithilfe der folgenden Syntax manuell festlegen:

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 „x²“-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!

Python JavaScript Array define for while select using Property this display issue

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So führen Sie Versprechen der Reihe nach aus: Eine umfassende Anleitung zu SynchronisationstechnikenNächster Artikel：So führen Sie Versprechen der Reihe nach aus: Eine umfassende Anleitung zu Synchronisationstechniken

In Verbindung stehende Artikel

Mehr sehen

• Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
• Detaillierte Erläuterung des JavaScript-Funktions-Curryings
• Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
• Angularjs integriert WeChat UI (weui)
• Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse

Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Über unsHaftungsausschlussSitemap

© php.cn All rights reserved