javascript - multiple - llenar select con angularjs

Angularjs select no marca el modelo coincidente como seleccionado

Question

Tengo un problema con mi ngModel en seleccionar que no aparece como seleccionado. Tanto la identificación como el nombre coinciden, pero no funciona, consulte selectedState. Señalar el modelo al objeto real dentro de la matriz de opciones funciona, ver selelectedState2. No tengo idea de qué está pasando ...

Fiddle: 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

Angular Team declaró este problema en la documentación para ngSelect here :

Nota: ngModel compara por referencia, no por valor. Esto es importante cuando se enlaza a una matriz de objetos. Vea un ejemplo en este 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];

Answer 2

Creo que Angular usa la verificación de referencias en lugar de comparar dos objetos con las mismas propiedades. En su caso, $ scope.selectedState2 devuelve un objeto diferente. Por lo general, uso un símbolo inferior para encontrar el elemento seleccionado de una matriz para la inicialización.

Answer 3

Cuando establece $ scope.selectedState, en realidad está creando un nuevo objeto javascript, que no es un elemento de $ scope.stateOptions. Por lo tanto, el elemento de selección no seleccionaría el elemento correspondiente de $ scope.stateOptions.

Puede usar ''seguimiento por'' en la expresión de selección si necesita seleccionar elementos por un valor attr único.

Answer 4

Esto se debe a que cada objeto tiene su propia $hashKey proporcionada por Angular que Angular utiliza para determinar si son iguales. Estás creando un nuevo objeto (con una $hashKey diferente) en $scope.selectedState . La forma en que lo configuró en $scope.selectedState2 es correcta.

También puede usar track by para hacer un seguimiento Angular por state.id lugar de $hashKey del objeto:

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

Answer 5

Intente agregar Track by state.id al final de su declaración ng-options.

Answer 6

Si está proporcionando un objeto como modelo que no contiene la referencia a la lista existente, entonces use track by con el valor único de su modelo, de modo que en lugar de usar el hashKey exclusivo de $$ $$, ng-options usará el la propiedad que proporciona en la pista para rastrear el modelo ng que se está configurando.

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

Demo

No solo es útil para configurar ng-model para cualquier referencia, sino que también tiene una gran eficacia en el rendimiento, especialmente cuando su lista se actualiza, los elementos no se eliminarán ni se volverán a crear, sino que angular solo actualizará el existente elemento.

Aquí hay un muy buen ejemplo para esto .