it-swarm.com.de

Schlüssel-Wert-Paare in ng-Optionen

Ich muss ein assoziatives Array als Datenquelle für meine select -Optionen mit AngularJS verwenden.

Ist es möglich, ein Array wie dieses zu verwenden?

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

und bekomme so etwas:

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

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

69
davioooh

verwenden ng-option:

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

oder benutze ng-repeat:

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

daten im Controller:

$scope.data = {
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
    ...
};
153
Chen-Tsu Lin

Der folgende Artikel beschreibt die verschiedenen Möglichkeiten, wie Sie ngOptions verwenden können (mit Abstand die klarste und gründlichste Erklärung, die ich je gesehen habe): http://www.undefinednull.com/2014/08/11/a -brief-durch-die-ng-optionen-in-eckigenjs /

19
Markus Hay

Answer by Chen-Tsu Lin bietet tatsächlich beide Möglichkeiten, auf Objekte zuzugreifen. Ich möchte nur ein paar Zeilen mehr hinzufügen -

Da die Direktive ng-repeat Einen HTML-Codeblock für jedes Element in einem Array wiederholt, können Optionen in einer Dropdown-Liste erstellt werden. Die Direktive ng-options Wurde jedoch speziell zum Füllen einer Dropdown-Liste erstellt Liste mit Optionen und hat mindestens einen wichtigen Vorteil:

Dropdowns, die mit ng-options Erstellt wurden, ermöglichen, dass der ausgewählte Wert ein Objekt ist, während Dropdowns, die mit ng-repeat Erstellt wurden, ein String sein müssen.

Ein Beispiel für die Referenz hinzufügen:

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

Zum vollständigen Nachschlagen gehen Sie auf http://www.w3schools.com/angular/angular_select.asp

2
Janusz01