it-swarm.com.de

Angularjs select markiert das übereinstimmende Modell nicht als ausgewählt

Ich habe ein Problem mit meinem ngModel in select, das nicht als ausgewählt angezeigt wird. Sowohl ID als auch Name stimmen überein, aber es funktioniert nicht, siehe ausgewählter Zustand. Das Zeigen des Modells auf das tatsächliche Objekt innerhalb des options-Arrays funktioniert, siehe selelectedState2. Keine Ahnung was los ist ... 

Geige: 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];

}
21
Micor

Dies liegt daran, dass jedes Objekt seinen eigenen $hashKey hat, der von Angular bereitgestellt wird, den Angular verwendet, um festzustellen, ob sie gleich sind. Sie erstellen ein neues Objekt (mit einem anderen $hashKey) auf $scope.selectedState. Die Art, wie Sie es auf $scope.selectedState2 setzen, ist korrekt.

Sie können auch track by verwenden, um Angular nach state.id anstelle des $hashKey des Objekts zu verfolgen:

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

Wenn Sie ein Objekt als Modell angeben, das nicht die Referenz auf die vorhandene Liste enthält, verwenden Sie track by mit dem eindeutigen Wert Ihres Modells, sodass ng-options die Eigenschaft anstelle des benutzerdefinierten eindeutigen $$ hashKey verwendet die Sie in der Spur angeben, um das eingestellte ng-Modell zu verfolgen.

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

Demo

Nicht nur, dass es nützlich ist, um ng-model auf eine Referenz zu setzen, sondern es hat auch eine große Leistungseffizienz, insbesondere wenn Ihre Liste aktualisiert wird. Die Elemente werden nicht entfernt und nicht neu erstellt, stattdessen wird das vorhandene Element nur von angle aktualisiert Element.

Hier ist ein sehr gutes Beispiel dafür .

8
PSL

Angular Team hat dieses Problem in der Dokumentation für ngSelect hier angegeben:

Hinweis: ngModel vergleicht nach Verweis, nicht nach Wert. Dies ist wichtig beim Binden an ein Array von Objekten. Ein Beispiel finden Sie in diesem 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

Wenn Sie $ scope.selectedState festlegen, erstellen Sie tatsächlich ein neues Javascript-Objekt, das kein Element der $ scope.stateOptions ist. Daher wählt das select-Element nicht das entsprechende Element aus $ scope.stateOptions aus.

Sie können 'track by' im select-Ausdruck verwenden, wenn Sie Elemente anhand eines eindeutigen attr-Werts auswählen müssen. 

2
Tharaka

Fügen Sie am Ende Ihrer ng-options-Anweisung Track nach Status.id hinzu.

1
Mindastic

Ich denke, Angular verwendet die Referenzprüfung, anstatt zwei Objekte mit den gleichen Eigenschaften zu vergleichen. In Ihrem Fall gibt $ scope.selectedState2 ein anderes Objekt zurück. Normalerweise benutze ich Understore, um das ausgewählte Element aus einem Array für die Initialisierung zu finden.

0
Hung Nguyen