Выбор Angularjs не обозначает подходящую модель как выбранную

У меня проблема с моим ngModel в select, который не отображается как выбранный. И id, и имя совпадают, но не работают, см. SelectedState. Указывает модель на фактический объект в массиве параметров, см. 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];

}

Ответ 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>

Ответ 2

Если вы предоставляете объект в качестве модели, в которой не содержится ссылка на существующий список, используйте track by с уникальным значением вашей модели, чтобы вместо использования уникального уникального $$ hashKey, ng- параметры будут использовать свойство, которое вы предоставляете на треке, для отслеживания установленной ng-модели.

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

Демо

Не только то, что полезно при установке ng-model на любую ссылку, но также имеет большую производительность, а особенно когда ваш список обновляется, элементы не будут удалены и воссозданы, вместо этого angular просто обновит существующий элемент.

Вот отличный пример для этого.

Ответ 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];

Ответ 4

Когда вы устанавливаете $scope.selectedState, вы фактически создаете новый объект javascript, который не является элементом $scope.stateOptions. Следовательно, элемент select не будет выбирать соответствующий элемент из $scope.stateOptions.

Вы можете использовать "track by" в выражении выбора, если вам нужно выбрать элементы по уникальному значению attr.

Ответ 5

Попробуйте добавить Трек по state.id в конце вашего оператора ng-options.

Ответ 6

Я думаю, что Angular использует контрольную проверку вместо сравнения двух объектов с теми же свойствами. В вашем случае $scope.selectedState2 возвращает другой объект. Обычно я использую underore, чтобы найти выбранный элемент из массива для инициализации.