Wie setze ich die value-Eigenschaft in den ng-Optionen von AngularJS?

Question 1

Hier ist, was viele Leute (mich eingeschlossen) zu stören scheint.

Bei Verwendung der ng-options Direktive in AngularJS zum Ausfüllen der Optionen für a <select> Tag kann ich nicht herausfinden, wie ich den Wert für eine Option festlegen kann. Die Dokumentation dazu ist wirklich unklar – zumindest für einen Einfaltspinsel wie mich.

Ich kann den Text für eine Option einfach so setzen:

ng-options="select p.text for p in resultOptions"

Wann resultOptions ist zum Beispiel:

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

Es sollte (und ist es wahrscheinlich) die einfachste Sache sein, die Optionswerte zu setzen, aber bisher verstehe ich es einfach nicht.

Question 2

Sehen ngOptionen

ngOptionen (optional) – {comprehension_expression=} – in einer der folgenden Formen:

Für Array-Datenquellen:
label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr
Für Objektdatenquellen:
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in object

In deinem Fall sollte es so sein

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

<select ng-options="obj.value as obj.text for obj in array"></select>

Aktualisieren

Mit den Updates auf AngularJS ist es nun möglich, den tatsächlichen Wert für die value Attribut von select Element mit track by Ausdruck.

<select ng-options="obj.text for obj in array track by obj.value">
</select>

Wie man sich an dieses hässliche Zeug erinnert

An alle Leute, die Schwierigkeiten haben, sich an diese Syntaxform zu erinnern: Ich stimme zu, dass dies nicht die einfachste oder schönste Syntax ist. Diese Syntax ist eine Art erweiterte Version von Pythons Listenverständnis, und wenn ich das weiß, kann ich mir die Syntax sehr leicht merken. Es ist ungefähr so:

Python-Code:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

Dies ist tatsächlich die gleiche Syntax wie die erste oben aufgeführte. Allerdings hinein <select> Normalerweise müssen wir zwischen dem tatsächlichen Wert in Code und dem angezeigten Text (dem Label) in a unterscheiden <select> Element.

Wie, wir brauchen person.id im Code, aber wir wollen das nicht zeigen id an den Benutzer; Wir wollen seinen Namen zeigen. Ebenso interessieren uns die nicht person.name im Code. Da kommt die as Schlüsselwort, um Dinge zu kennzeichnen. Also wird es so:

person.id as person.name for person in people

Oder statt person.id wir könnten die brauchen person Instanz/Referenz selbst. Siehe unten:

person as person.name for person in people

Für JavaScript-Objekte gilt die gleiche Methode ebenfalls. Denken Sie nur daran, dass die Gegenstände im Objekt mit dekonstruiert werden (key, value) Paare.

Question 3

Wenn Sie den Wert Ihrer ändern möchten option Elemente, da das Formular schließlich an den Server gesendet wird, anstatt dies zu tun,

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

Du kannst das:

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

Der erwartete Wert wird dann unter dem richtigen Namen durch das Formular gesendet.

Question 4

Um einen benutzerdefinierten Wert zu senden, wird aufgerufen my_hero an den Server mit einem normalen Formular senden:

JSON:

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML:

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

Der Server empfängt entweder iron oder super als Wert von my_hero.

Dies ähnelt der Antwort von @neemzy, wobei jedoch separate Daten für die angegeben werden value Attribut.

Question 5

Anscheinend ng-options ist kompliziert (möglicherweise frustrierend) zu verwenden, aber in Wirklichkeit haben wir ein Architekturproblem.

AngularJS dient als MVC-Framework für eine dynamische HTML+JavaScript-Anwendung. Während seine (View)-Komponente HTML-“Vorlagen” bietet, besteht sein Hauptzweck darin, Benutzeraktionen über einen Controller mit Änderungen im Modell zu verbinden. Deswegen Die geeignete Abstraktionsebene, von der aus in AngularJS gearbeitet werden kann, besteht darin, dass ein Auswahlelement einen Wert im Modell auf einen Wert aus einer Abfrage setzt.

Wie eine Abfragezeile dem Benutzer präsentiert wird, ist das Anliegen der (Ansicht) und ng-options bietet die for -Schlüsselwort, um festzulegen, was der Inhalt des Optionselements sein soll dh p.text for p in resultOptions.

Wie eine ausgewählte Zeile dem Server präsentiert wird, ist die Angelegenheit des (M)odels. Deswegen ng-options bietet die as Schlüsselwort, um anzugeben, welcher Wert dem Modell wie in bereitgestellt wird k as v for (k,v) in objects.

Die richtige Lösung dieses Problems ist dann architektonischer Natur und beinhaltet das Refactoring Ihres HTML, sodass das (M)odel bei Bedarf die Serverkommunikation durchführt (anstatt dass der Benutzer ein Formular absendet).

Wenn eine MVC-HTML-Seite unnötiges Over-Engineering für das vorliegende Problem ist: Verwenden Sie dann nur den HTML-Generierungsteil der (V)View-Komponente von AngularJS. Folgen Sie in diesem Fall dem gleichen Muster, das zum Generieren von Elementen wie verwendet wird <li />ist unter <ul />‘s und platzieren Sie eine ng-Wiederholung auf einem Optionselement:

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

Als klumpenkann man das name-Attribut des select-Elements immer in ein verstecktes input-Element verschieben:

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

Question 6

Du kannst das:

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

— AKTUALISIEREN

Nach einigen Updates, user frm.adiputraDie Lösung von ist viel besser. Code:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>