次を使用して配列をselect
タグにバインドするとします。
<select ng-model="selData" ng-options="$index as d.name for d in data">
この場合、関連付けられたoption
タグには、インデックス値のシーケンス(0、1、2、...)が割り当てられます。ただし、ドロップダウンから何かを選択すると、selData
の値がundefined
にバインドされます。バインディングは実際に機能する必要がありますか?
一方、代わりに次のことを行うと言います。
<select ng-model="selData" ng-options="d as d.name for d in data">
ここでは、option
タグは同じインデックスを取得しますが、オブジェクト全体が変更時にバインドされます。設計どおりにこの方法で動作していますか、またはこの動作は単に素晴らしいバグまたはAngularJSの副作用ですか?
$ indexは、selectではなくng-repeatに対して定義されています。これがundefined
を説明すると思います。 (つまり、いいえ、これは機能しません。)
Angularは、オブジェクト全体のバインディングをサポートしています。これを示すためにドキュメントをよりわかりやすく表現することもできますが、「選択モデルを非文字列値にバインドする場合は、ngRepeatの代わりにngOptions ...を使用する必要があります」というヒントがあります。
配列はJavaScriptのオブジェクトに非常に似ているため、「オブジェクトデータソース」の構文を使用できます。トリックはng-options
部分の括弧にあります:
var choices = [
'One',
'Two',
'Three'
];
テンプレートで:
<select
ng-model="model.choice"
ng-options="idx as choice for (idx, choice) in choices">
</select>
最終的に、model.choice
の値は0、1、または2になります。0の場合、One
;が表示されます。 1はTwo
などを表示します。しかし、モデルでは、インデックス値のみが表示されます。
この情報をPACKT Publishingの「AngularJSでWebアプリケーション開発をマスターする」から改編し、 selectの角度参照ドキュメント で検証しました。
$index
は使用できないが、indexOf
を試すことができるため。
[〜#〜] html [〜#〜]
<div ng-app ng-controller="MyCtrl">
<select
ng-model="selectedItem"
ng-options="values.indexOf(selectedItem) as selectedItem for selectedItem in values"></select>
selectedItem: {{selectedItem}}
</div>
コントローラー
function MyCtrl($scope) {
$scope.values = ["Value1","Value2"];
$scope.selectedItem = 0;
}
デモ Fiddle
コメント:
Array.prototype.indexOf
はIE7でサポートされていません(8)
<option>
タグでng-value = '$ index'を使用することもできます。
<select ng-model="selData">
<option ng-repeat="d in data track by $index" ng-value="$index">
{{d.name}}
</option>
</select>
Selectタグ内で$index
を使用しないでください。配列インデックスを値またはオプションとして使用する場合は、optionタグ内で$index
を使用します。
<option ng-repeat="user in users" value="{{user.username}}">{{$index+1}}</option>
内部値を使用したい場合は、次のようなバインディング式として値属性に入れてください
<option ng-repeat="user in users" value="{{$index+1}}">{{user.username}}</option>
私のコントローラーコードは次のようになります:
var users = ['username':'bairavan', 'username':'testuser'];