web-dev-qa-db-ja.com

AngularJS 'ng-options'ディレクティブで$ indexを使用していますか？

次を使用して配列を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の副作用ですか？

angularjshtml-select
59
Jim Cote

$ indexは、selectではなくng-repeatに対して定義されています。これがundefinedを説明すると思います。 （つまり、いいえ、これは機能しません。）

Angularは、オブジェクト全体のバインディングをサポートしています。これを示すためにドキュメントをよりわかりやすく表現することもできますが、「選択モデルを非文字列値にバインドする場合は、ngRepeatの代わりにngOptions ...を使用する必要があります」というヒントがあります。

21
Mark Rajcok

配列は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の角度参照ドキュメント で検証しました。

196
Harry Pehkonen

$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）

45
Maxim Shoustin

<option>タグでng-value = '$ index'を使用することもできます。

<select ng-model="selData">
 <option ng-repeat="d in data track by $index" ng-value="$index">
   {{d.name}}
 </option>
</select>
4
Brian McAuliffe

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'];
1
Bairu