Angular.js: Angular 1.6 se restablece incorrectamente '<select>valor de "ng-model"</select>

Creado en 20 ene. 2017  ·  3Comentarios  ·  Fuente: angular/angular.js

Nota : para preguntas de soporte, utilice uno de estos canales: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question.

¿Quieres solicitar una función o informar de un error ?
Bicho

¿Cuál es el comportamiento actual?
Angular 1.6 restablece el <select> s ng-model cuando la lista <option> s cambia (consulte la sección "Otra información").
Angular 1.5 lo conserva.

Si el comportamiento actual es un error, proporcione los pasos para reproducir y, si es posible, una demostración mínima del problema a través de https://plnkr.co o similar (plantilla: http://plnkr.co/edit/tpl:yBpEi4) .
Angular 1.6: https://plnkr.co/edit/wHc4rzy7x9PAEqQLfVQT?p=preview
Angular 1.5.11: https://plnkr.co/edit/e0LVMEtGP2j4JxNf8lsp?p=preview

¿Cuál es el comportamiento esperado?
ng-model conserva su valor.

¿Cuál es la motivación / caso de uso para cambiar el comportamiento?
No es correcto.

¿Qué versiones de Angular y qué navegador / sistema operativo se ven afectados por este problema? Pruebe también con las últimas versiones estable y instantánea (https://code.angularjs.org/snapshot/).
Angular 1.6.x se ve afectado.
Angular 1.5.x no lo es.

Otra información (p. Ej., Seguimiento de pila, problemas relacionados, sugerencias de cómo solucionarlo)
La cuestión es que Angular 1.6 rastrea las opciones por su modelo y no por el options s.

En los fragmentos de arriba, la matriz de opciones contiene 2 objetos: [{val: "1"}, {val: "2"}] .
ng-repeat itera a través de ellos y usa la propiedad val como valor de opción y título.
vm.selected se usa como el ng-model y se establece inicialmente en "2".

Después de presionar el botón Change options , reemplazo la matriz de opciones con esta: [{val: "2"}, {val: "3"}] y Angular 1.6 restablece el vm.selected pero no debería porque la opción con valor 2 es todavía en la lista.

Angular 1.5 se comporta correctamente en este caso y se conserva el valor vm.selected .

Si vm.options contiene valores primitivos, el error no aparece ( fragmento ).

forms low investigation regression bug
Fuente
picture th0r
👍7

Comentario más útil

Parece que esto fue un cambio intencional en https://github.com/angular/angular.js/commit/47c15fbcc10f118170813021e8e605ffd263ad84 : "- cuando una opción que está actualmente seleccionada, se elimina o su valor cambia, el modelo se establece en nulo. " pero esto no tuvo en cuenta que esto podría estar fallando, o que ngRepeat tomaría un resumen para actualizar las opciones. También es más fácil de hacer en ngOptions porque controlamos la creación / destrucción de elementos.
Pero scheduleRender () funciona, ¡yay para @gkalpak ! Veré si rompe las pruebas y prepararé un PR.

picture Narretz en 20 ene. 2017
🎉2 👍2

Todos 3 comentarios

Parece un problema válido y se rompe en 1.6.0-rc.0. No estoy seguro de por qué no sucedió antes, pero el problema parece ser este:

  1. Cuando la matriz cambia, ngRepeat elimina los elementos <option> .
  2. Esto hace que <select> no se seleccione y ngModel se establezca en nulo.
  3. Los nuevos elementos son creados e insertados por ngRepeat , pero el modelValue ya no es 2 , por lo que <select> no tiene forma de asociarlo con el nuevo <option value="2" ...> .

Una solución alternativa es usar track by para evitar destruir y recrear los elementos <option> :

<option ng-repeat="option in options track by option.val" value="option.val">...

#

de un vistazo rápido, las siguientes confirmaciones son candidatas a haber causado esto (pero podría ser otra cosa):

  • f02b707
  • 47c15fb
  • 2785ad7

#

En la parte superior de mi cabeza, comenzaría reemplazando esta línea con scheduleRender() y vería si ayuda ...

Estoy seguro de que @Narretz tendrá mejores ideas: smiley:

gkalpak picture gkalpak en 20 ene. 2017
👍2 ❤1

Una solución alternativa es utilizar track by para evitar destruir y recrear el

Sí, lo descubrí también pero olvidé mencionarlo 😏

th0r picture th0r en 20 ene. 2017

Parece que esto fue un cambio intencional en https://github.com/angular/angular.js/commit/47c15fbcc10f118170813021e8e605ffd263ad84 : "- cuando una opción que está actualmente seleccionada, se elimina o su valor cambia, el modelo se establece en nulo. " pero esto no tuvo en cuenta que esto podría estar fallando, o que ngRepeat tomaría un resumen para actualizar las opciones. También es más fácil de hacer en ngOptions porque controlamos la creación / destrucción de elementos.
Pero scheduleRender () funciona, ¡yay para @gkalpak ! Veré si rompe las pruebas y prepararé un PR.

Narretz picture Narretz en 20 ene. 2017
🎉2 👍2
¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

ashclarke picture ashclarke  ·  3Comentarios
visnup picture visnup  ·  3Comentarios
awerlang picture awerlang  ·  3Comentarios
butchpeters picture butchpeters  ·  3Comentarios
kishanmundha picture kishanmundha  ·  3Comentarios