web-dev-qa-db-ja.com

Angularjs選択は一致するモデルを選択済みとしてマークしません

SelectのngModelが選択されたものとして表示されないという問題があります。 idとnameの両方が一致していますが、機能していません。selectedStateを参照してください。 options配列内の実際のオブジェクトを指すモデルは機能します。selelectedState2を参照してください。何が起こっているのかわからない...

フィドル： http://jsfiddle.net/fedorsmirnoff/b49n4Ldp/2/

<select ng-model="selectedState" ng-options="state.name for state in stateOptions"></select>

<select ng-model="selectedState2" ng-options="state.name for state in stateOptions"></select>

function MainCtrl($scope) {
 $scope.stateOptions = [
     {id: 1, name: "Alaska"},
     {id: 2, name: "Montana"},
     {id: 3, name: "Nebraska"},
     {id: 4, name: "Texas"}
  ]

 $scope.selectedState = {id: 2, name: "Montana"};

 $scope.selectedState2 = $scope.stateOptions[1];

}
javascriptangularjsangularjs-ng-optionsangularjs-ng-model
21
Micor

これは、各オブジェクトにAngularが提供する独自の$hashKeyがあり、Angularが同じかどうかを判断するために使用するためです。 $hashKeyに（別の$scope.selectedStateで）新しいオブジェクトを作成しています。 $scope.selectedState2での設定方法は正しいです。

オブジェクトのtrack byの代わりにstate.idを使用してAngularを$hashKeyで追跡することもできます。

<select ng-model="selectedState" ng-options="state.name for state in stateOptions track by state.id"></select>
31
m59

既存のリストへの参照を保持しないモデルとしてオブジェクトを提供する場合は、モデルの一意の値でtrack byを使用し、カスタムの一意の$$ hashKey、ng-optionsを使用する代わりに設定されているng-modelを追跡するために、トラックで指定したプロパティを使用します。

  ng-options="state.name for state in stateOptions track by state.id"

デモ

Ng-modelを任意の参照に設定するのに役立つだけでなく、特にリストが更新されたときに要素の削除や再作成が行われず、パフォーマンスが大幅に向上するだけでなく、angularは既存の要素を更新するだけです。

これが これの非常に良い例 です。

8
PSL

Angularチームは、ngSelectのドキュメントでこの問題を述べています here ：

注：ngModelは値ではなく参照で比較します。これは、オブジェクトの配列にバインドするときに重要です。この例 jsfiddle を参照してください。

 $scope.options = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];

  // Although this object has the same properties as the one in $scope.options,
  // Angular considers them different because it compares based on reference
  $scope.incorrectlySelected = { label: 'two', value: 2 };

  // Here we are referencing the same object, so Angular inits the select box correctly
  $scope.correctlySelected = $scope.options[1];
3
Dalorzo

$ scope.selectedStateを設定すると、実際には新しいJavaScriptオブジェクトが作成されますが、これは$ scope.stateOptionsの要素ではありません。したがって、select要素は$ scope.stateOptionsから対応する要素を選択しません。

一意のattr値でアイテムを選択する必要がある場合は、select式で「track by」を使用できます。

2
Tharaka

Ng-optionsステートメントの終わりにTrack by state.idを追加してみてください。

1
Mindastic

Angularは、同じプロパティを持つ2つのオブジェクトを比較する代わりに参照チェックを使用します。あなたの場合、$ scope.selectedState2は異なるオブジェクトを返します。通常、アンダーストアを使用して、初期化。

0
Hung Nguyen