web-dev-qa-db-ja.com

単純配列initを使ったng-options

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'が必要です。

angularjsng-gridng-options
180
Dragu

あなたは実際にあなたの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を使用すると正しく更新されます。

295
James Davies

ng-repeatをoptionと一緒に使うことができます。

<form>
    <select ng-model="yourSelect" 
        ng-options="option as option for option in ['var1', 'var2', 'var3']"
        ng-init="yourSelect='var1'"></select>
    <input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>

formを送信すると、入力値を隠すことができます。

DEMO

ng-selectedng-repeat

33
EpokK

次のように選択を設定した場合：

<select ng-model="myselect" ng-options="b for b in options track by b"></select>

あなたが得るでしょう：

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

作業フィドル： http://jsfiddle.net/x8kCZ/15/

20
Ida N

あなたはのようなものを使うことができます

<select ng-model="myselect">
    <option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
        {{o}}
    </option>
</select>

myselectが事前入力されている場合は、ng-selectedを使用してオプションを事前選択します。

Ng-optionsは配列に対してのみ機能するので、私はとにかくng-optionsよりもこの方法が好きです。 ng-repeatはjson風のオブジェクトでも動作します。

20
iPirat
<select ng-model="option" ng-options="o for o in options">

生成されたhtmlにvalue = "0"が表示されていても、$ scope.optionは変更後の 'var1'に等しくなります。

プランカー

10
Toolkit