Schlüssel-Wert-Paare in ng-Optionen

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.

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",
    ...
};

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

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