web-dev-qa-db-ja.com

AngularJS-選択の値属性

ソースJSONデータは次のとおりです。

[
  {"name":"Alabama","code":"AL"},
  {"name":"Alaska","code":"AK"},
  {"name":"American Samoa","code":"AS"},
  ...
]

やってみる

ng-options="i.code as i.name for i in regions"

しかし、取得しています：

<option value="?" selected="selected"></option>
<option value="0">Alabama</option>
<option value="1">Alaska</option>
<option value="2">American Samoa</option>

私が得ることを期待している間：

<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>

だから、値の属性を取得し、「？」を取り除く方法項目？

ところで、$ scope.regionsをAJAXリクエストの結果ではなく静的JSONに設定すると、空のアイテムは消えます。

selectangularjsoptions
72
Paul

最初に試したものは動作するはずですが、HTMLは期待したものではありません。最初の「アイテムが選択されていない」ケースを処理するオプションを追加しました。

<select ng-options="region.code as region.name for region in regions" ng-model="region">
   <option style="display:none" value="">select a region</option>
</select>
<br>selected: {{region}}

上記はこのHTMLを生成します：

<select ng-options="..." ng-model="region" class="...">
   <option style="display:none" value class>select a region</option>
   <option value="0">Alabama</option>
   <option value="1">Alaska</option>
   <option value="2">American Samoa</option>
</select>

フィドル

Angularは値に整数を使用しますが、モデル（つまり$ scope.region）は必要に応じてAL、AK、またはASに設定されます。 （数値がAngularによって使用され、リストからオプションが選択されたときに正しい配列エントリを検索します。）

これは、Angularがその「選択」ディレクティブを実装する方法を最初に学習するときに混乱する可能性があります。

74
Mark Rajcok

Ng-repeatで自分でビルドしない限り、これを実際に行うことはできません。

<select ng-model="foo">
   <option ng-repeat="item in items" value="{{item.code}}">{{item.name}}</option>
</select>

しかし...それはおそらく価値がありません。設計どおりに機能させ、Angularが内部の動作を処理するようにした方が良いでしょう。 Angularはこの方法でインデックスを使用するため、オブジェクト全体を値として実際に使用できます。そのため、ドロップバインドを使用して、単なる文字列ではなく値全体を選択できます。

<select ng-model="foo" ng-options="item as item.name for item in items"></select>

{{foo | json}}
26
Ben Lesh

track byオプションを使用する場合、value属性は正しく書き込まれます。例：

<div ng-init="a = [{label: 'one', value: 15}, {label: 'two', value: 20}]">
    <select ng-model="foo" ng-options="x for x in a track by x.value"/>
</div>

生成するもの：

<select>
    <option value="" selected="selected"></option>
    <option value="15">one</option>
    <option value="20">two</option>
</select>
21
Joscha

ドロップダウンに指定されたモデルが存在しない場合、angularは空のオプション要素を生成します。したがって、selectで次のようにモデルを明示的に指定する必要があります。

<select ng-model="regions[index]" ng-options="....">

以前に回答があったため、以下を参照してください。

AngularJSにselectに空のオプションが含まれているのはなぜですか？ およびこの fiddle

更新：代わりにこれを試してください：

<select ng-model="regions[index].code" ng-options="i.code as i.name for i in regions">
</select>

or

<select ng-model="regions[2]" ng-options="r.name for r in regions">
</select>

Selectには空のoptions要素がないことに注意してください。

7
msyed

次のようにモデルを変更できます。

$scope.options = {
    "AL" : "Alabama",
    "AK" : "Alaska",
    "AS" : "American Samoa"
  };

次に使用する

<select ng-options="k as v for (k,v) in options"></select>
5
Olivier.Roger

Selectの「値」を通常のHTMLフォーム要素として意味のある方法で実際に使用することも、ng-optionsで承認された方法でAngularにフックすることもできないようです。妥協案として、私は選択の横に隠された入力を配置し、次のように選択と同じモデルを追跡する必要がありました（簡潔にするため、実際の製品コードから非常に単純化されています）。

HTML：

<select ng-model="profile" ng-options="o.id as o.name for o in profiles" name="something_i_dont_care_about">
</select>
<input name="profile_id" type="text" style="margin-left:-10000px;" ng-model="profile"/>

Javascript：

App.controller('ConnectCtrl',function ConnectCtrl($scope) {
$scope.profiles = [{id:'xyz', name:'a profile'},{id:'abc', name:'another profile'}];
$scope.profile = -1;
}

次に、サーバー側のコードでparams[:profile_id]を探しました（これはたまたまRailsアプリでしたが、どこでも同じ原理が当てはまります）。非表示の入力はselectと同じモデルを追跡するため、自動的に同期が維持されます（追加のJavaScriptは不要です）。これはAngularのクールな部分です。これは、副作用としてvalue属性に対して行うことをほぼ補います。

興味深いことに、この手法は非表示ではない入力タグでのみ機能することがわかりました（そのため、margin-left：-10000pxを使用する必要がありました。入力をページから移動するためのトリック）。次の2つのバリエーションは機能しませんでした。

<input name="profile_id" type="text" style="display:none;" ng-model="profile"/>

そして

<input name="profile_id" type="hidden" ng-model="profile"/>

それは何かを見逃していることを意味しているに違いない。それがAngularの問題になるのはあまりにも奇妙に思えます。

4
Tim Cull

使用できます

state.name for state in states track by state.code

JSON配列の状態の場合、状態は配列内の各オブジェクトの変数名です。

お役に立てれば

1
lazell