ng-optionsのキー・バリュー・ペア
2023-08-06 14:28:41
質問
私は
連想配列
をデータソースとして使用する必要があります。
select
オプションのデータソースとして使用します。
このような配列を使用することは可能でしょうか?
{
"key1": "val1",
"key2": "val2",
"key3": "val3",
...
}
と入力し、このようなものが得られます。
<select>
<option value="key1">val1</option>
<option value="key2">val2</option>
<option value="key3">val3</option>
...
</select>
読む ドキュメント を読みましたが、これを実現する方法を理解することができません。
どのように解決するのですか?
使用
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",
...
};
関連
-
[解決済み] JavaScript で配列に値が含まれているかどうかを確認するにはどうすればよいですか?
-
[解決済み] JavaScriptのオブジェクトにキーが存在するかどうかをチェックする?
-
[解決済み] JavaScriptのオブジェクトにキーと値のペアを追加するにはどうすればよいですか?
-
[解決済み] セレクトボックスのオプションをすべて削除してから、オプションを1つ追加して、jQueryで選択するにはどうすればよいですか?
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] これは純関数ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] ECMAScriptとは?
-
[解決済み] jQueryで入力ファイルが空かどうかをチェックする方法
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] これは純関数ですか?