1. ホーム
  2. angularjs

[解決済み] 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を使用すると、スコープが変更されたときに正しくリフレッシュされます。