[解決済み] ng-options と単純な配列の初期化
2022-04-25 11:38:41
質問
ちょっとAngularと迷うところですが
ng-options
.
単純な配列があり、それを使ってselectを開始したい。 しかし、オプションの値=ラベルにしたい。
script.js
$scope.options = ['var1', 'var2', 'var3'];
html
<select ng-model="myselect" ng-options="o for o in options"></select>
私が得たもの
<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>
私が欲しいもの
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
そこで、試してみました。
<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>
<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>
(でも、うまくいかなかった)。
編集する
私のフォームは外部から送信されます。そのため、0 ではなく 'var1' を値として使用する必要があります。
どのように解決するのですか?
実は3回目の挑戦で正解していたんですね。
<select ng-model="myselect" ng-options="o as o for o in options"></select>
動作例はこちらをご覧ください。 http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview
AngularJSはキーを0からnまでの数字で書き、モデルを更新するときに変換して戻すというトリックがあります。
その結果、HTMLの見た目はおかしくなりますが、値を選択する際にモデルは適切に設定されます。 (すなわち、AngularJSは'0'を'var1'に翻訳し直します)
Epokkによる解決策も機能しますが、データを非同期で読み込んでいる場合、常に正しく更新されるとは限りません。ngOptionsを使用すると、スコープが変更されたときに正しくリフレッシュされます。
関連
-
[解決済み】Angularjsのng-viewが動作しない。
-
[解決済み] プリフライト応答が成功しない
-
[解決済み] select 要素のデフォルト値を設定するための ng-option の使用方法
-
[解決済み] AngularJSの「href」と「ng-href」の違いについて
-
処理されない例外が発生しました。Angular 実行中のプロジェクトで NGCC に失敗しました。
-
[解決済み] ngInject'を本当に書く必要があるのか?
-
[解決済み] Angular.js: $evalの仕組みとバニラevalとの違いは何ですか?
-
[解決済み] AngularJSでEnterキーを押したときにフォームを送信する
-
[解決済み】AngularJSのng-optionsでselectを操作する。
-
[解決済み] AngularJSとng-repeatによるselectの初期化
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】npm UNMET PEER DEPENDENCYの警告を修正するにはどうすればいいですか?
-
[解決済み】angularのonLoadとng-initの違いについて
-
[解決済み] ディレクティブ '...' が要求するコントローラ 'ngModel' が見つかりません。
-
[解決済み] エラーです。10回の$digest()反復に達しました。動的なsortby述語で中断!?
-
[解決済み] AngularJS の ng-disabled ディレクティブに式を指定しても動作しない
-
[解決済み] angularjsでチャートを作成する【終了】。
-
[解決済み] controllerAs "プロパティを使用する理由は何ですか?
-
[解決済み] ngInject'を本当に書く必要があるのか?
-
[解決済み] AngularJS: ngRouteが動作しない。
-
[解決済み] ng-classを使った複数クラスの追加