web-dev-qa-db-ja.com

ng-optionsのキーと値のペア

AngularJSを使用してselectオプションのデータソースとして連想配列を使用する必要があります。

このような配列を使用することは可能ですか？

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

次のようなものを取得します：

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

docs を読みましたが、これを達成する方法を理解できません。

javascriptangularjsselectng-options
69
davioooh

ng-optionを使用：

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

またはng-repeatを使用します。

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

コントローラー内のデータ：

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

次の記事では、ngOptionsを使用できるさまざまな方法について説明します（これまで見てきた中で最も明確で最も徹底的な説明）： http://www.undefinednull.com/2014/08/11/a -brief-walk-through-of-the-ng-options-in-angularjs /

19
Markus Hay

Chen-Tsu Lin による回答は、実際にオブジェクトにアクセスする両方の方法を提供します。さらに数行追加したいだけです-

ng-repeatディレクティブは配列内の各アイテムに対してHTMLコードのブロックを繰り返すため、ドロップダウンリストにオプションを作成するために使用できますが、ng-optionsディレクティブは特にドロップダウンリストを埋めるために作成されましたオプションと少なくとも1つの重要な利点があります。

ng-optionsで作成したドロップダウンでは、選択した値をオブジェクトにすることができますが、ng-repeatで作成したドロップダウンは文字列にする必要があります。

参照用の例を追加します。

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

完全なリファレンスについては、 http://www.w3schools.com/angular/angular_select.asp に進んでください。

2
Janusz01