Schlüssel-Wert-Paare in ng-Optionen

73

Ich muss ein assoziatives Array als Datenquelle für meine selectOptionen mit AngularJS verwenden.

Ist es möglich, ein solches Array zu verwenden?

{
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
    ...
}

und so etwas bekommen:

<select>
    <option value="key1">val1</option>
    <option value="key2">val2</option>
    <option value="key3">val3</option>
    ...
</select>

Ich lese Dokumente , kann aber nicht verstehen, wie ich das erreichen kann.

javascript angularjs select ng-options Davioooh
quelle

Antworten:

160

Verwenden Sie ng-option:

<select ng-model="blah" ng-options="key as value for (key , value) in data"></select>

oder verwenden ng-repeat:

<select>
    <option ng-repeat="(key, value) in data" value="{{key}}">{{value}}</option>
</select>

Daten in der Steuerung:

$scope.data = {
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
    ...
};
Chen-Tsu Lin
quelle
31
Ich würde dringend empfehlen, die ng-repeat-Methode zu vermeiden, da für jedes Schlüssel / Wert-Paar 2 neue Uhren hinzugefügt werden. Wenn Ihre Auswahl also 50 Elemente enthält, haben Sie gerade 100 neue Beobachter erstellt. Huch.
Markus Hay
9
Wenn Sie verwenden müssen ng-repeatund Ihre Schlüssel / Werte sich nicht ändern, können Sie die 2 neuen Uhren, die @MarkusHay erwähnt, vermeiden, indem Sie die neue einmalige Bindungssyntax verwenden :<option ng-repeat="(key, value) in data" value="{{::key}}">{{::value}}</option>
Alex Ross
2
Vielen Dank, viel klarer als das offizielle Dokument für ngOption.
Petr Peller
1
Verwenden Sie die ng-Option: Ich habe viele Lösungen für ng-optionsbasierend auf gesehen, objectaber dies ist die beste .
Mosh Feu
2
Sehr schön, aber nicht in der Lage, das ausgewählte Standardelement mit 'ng-options'
festzulegen
3

Die Antwort von Chen-Tsu Lin bietet tatsächlich beide Möglichkeiten, auf Objekte zuzugreifen. Ich möchte nur noch ein paar Zeilen hinzufügen -

Da die ng-repeatDirektive einen HTML-Codeblock für jedes Element in einem Array wiederholt, kann sie zum Erstellen von Optionen in einer Dropdown-Liste verwendet werden. Die ng-optionsDirektive wurde jedoch speziell zum Füllen einer Dropdown-Liste mit Optionen erstellt und hat mindestens einen wichtigen Vorteil:

Mit Dropdowns, die mit erstellt wurden, ng-optionskann der ausgewählte Wert ein Objekt sein, während Dropdowns ng-repeatmit eine Zeichenfolge sein müssen.

Hinzufügen eines Beispiels für die Referenz:

ng-repeat: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_repeat_selected

ng-options: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_object

Eine vollständige Referenz finden Sie unter http://www.w3schools.com/angular/angular_select.asp

Janusz01
quelle