21

選択中の ngModel が選択済みとして表示されないという問題があります。ID と名前の両方が一致していますが、機能していません。selectedState を参照してください。オプション配列内の実際のオブジェクトへのモデルのポイントは機能します。selectedState2 を参照してください。何が起こっているのかわからない...

フィドル: 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];

}
4

6 に答える 6

32

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

オブジェクトの の代わりにtrack byAngular を追跡するために使用することもできます:state.id$hashKey

<select ng-model="selectedState" ng-options="state.name for state in stateOptions track by state.id"></select>
于 2014-09-07T01:34:24.177 に答える
3

Angular チームは、ngSelect のドキュメントでこの問題について次のように述べています。

注: 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];
于 2014-09-07T01:36:13.333 に答える
2

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

一意の属性値で項目を選択する必要がある場合は、select 式で「track by」を使用できます。

于 2014-09-07T01:34:34.617 に答える
1

ng-options ステートメントの最後に Track by state.id を追加してみてください。

于 2014-09-07T01:35:38.627 に答える