Angularjs select不会将匹配模型标记为已选中

Question

我的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];

}

Answer 1

这是因为每个对象$hashKey都由Angular提供,Angular使用它来确定它们是否相同.您正在创建一个新对象(使用不同的对象$hashKey)$scope.selectedState.你设置它的方式$scope.selectedState2是正确的.

您也可以使用而不是对象track by来制作Angular轨道:state.id$hashKey

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

Answer 2

如果您提供的对象作为不包含对现有列表的引用的模型,则使用track by模型的唯一值,以便不使用自定义唯一$$ hashKey,ng-options将使用属性您在轨道中提供跟踪正在设置的ng模型.

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

演示

不仅在将ng-model设置为任何引用时它很有用,而且它还具有很高的性能效率,特别是当您的列表被刷新时,元素将不会被删除和重新创建,而angular只会更新现有的元件.

这是一个非常好的例子.