angularjs - obtener - ng-options value

Angular agrega opciones extrañas en el elemento seleccionado al configurar el valor del modelo

Question

Tengo un elemento de selección definido como tal:

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id">
    <option value="">Select Country</option>
    <option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

Todo funciona bien cuando no estoy configurando ningún tipo de valor en la directiva que contiene este elemento de selección. Pero cuando hago algo como newAddressForm.country_id = 98 , en lugar de seleccionar la opción con el valor 98, Angular inyecta una nueva en la parte superior del elemento seleccionado, así:

<option value="? string:98 ?"></option>

¿Lo que da? ¿Qué tipo de formato es este y por qué sucede esto? Tenga en cuenta que si hago una console.log(newAddressForm.country_id) en la directiva, obtengo un "98" normal, es raro en el HTML generado.

Edición: actualización de la situación. Cambió a usar ng-select , pero el problema persiste.

El elemento extraño ya no aparece, PERO, ¿ahora hay otro elemento en la parte superior, uno que solo tiene un signo de interrogación ? como el valor, y sin etiqueta.

Eso es, de lo que recogí, la opción "none selected" Angular. Sin embargo, todavía no entiendo por qué no seleccionará la opción que le pido que seleccione.

Hacer newAddressForm.country_id = 98 aún no da resultados. ¿Porqué es eso?

Answer 1

Angular no establece el valor de un elemento de selección a los valores reales de su matriz y hace algunas cosas internas para administrar el enlace de alcance. Vea el primer comentario de Mark Rajcok en este enlace:

https://docs.angularjs.org/api/ng/directive/select#overview

Cuando el usuario selecciona una de las opciones, Angular usa el índice (o clave) para buscar el valor en la matriz (u objeto), cuyo valor de búsqueda es el que está configurado para el modelo. (Por lo tanto, el modelo no está establecido en el valor que se ve en el HTML. Esto causa mucha confusión).

No estoy completamente seguro de que usar una ng-repeat sea ​​la mejor opción.

Answer 2

Cuando asigna un valor a algún elemento de selección, AngularJS busca el valor proporcionado en el atributo de valor de las etiquetas de opción en ese elemento de selección. Pero el problema es que AngularJS hace una comparación basada en tipos . Entonces, si los valores en las etiquetas de opción son cadenas (lo que generalmente es el caso) y la variable que vincula usando ng-model es un número, AngularJS no encuentra el elemento de opción coincidente y, por lo tanto, crea su propio elemento como este:

<option value="? integer:10 ?"></option>

La solución es, mientras se enlaza a sí misma, convertirla al tipo apropiado.

En este caso, la solución sería unir un entero.

<select name="country_id" id="country_id" required="required" ng-model="parseInt(newAddressForm.country_id)">
<option value="">Select Country</option>
<option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

Si los valores se establecen como cadenas, el truco sería utilizar

<select ... ng-model="newAddressForm.country_id.toString()" >

Answer 3

Me encontré con este mismo problema esta noche, donde vi que una opción de selección se mostraba como la primera en mi lista, aunque no la creé explícitamente. Estaba llenando una lista de opciones de selección en mi controlador y usando la misma sintaxis de ng-options mencionada anteriormente por jessedvrs (excepto que también estaba insertando la opción predeterminada "seleccione una opción" en el controlador en lugar de marcarla en el HTML como si estuviera estaba).

Por alguna razón, la lista de selección siempre mostraría una opción adicional en el índice cero con un valor de "?", Pero cuando cambié la forma en que llené mi opción predeterminada en el controlador, este problema desapareció. Estaba poblando las opciones seleccionadas haciendo una llamada a la API, llenándolas dentro de una promesa. Cometí el error de llenar también la opción predeterminada "seleccionar una opción" como la primera cosa que hice en esa promesa, pero cuando hice esto en lugar de la promesa (antes de hacer la llamada a la API), las opciones de selección llenaron el camino Los desvanecí a

Creo que la opción jessedvrs es una solución al problema (establecer la opción predeterminada en el formato HTML), pero si prefiere llenar sus opciones en javascript, le sugeriría que aún establezca la opción predeterminada antes de realizar cualquier llamada a una API o procesos que aún pueden estar en ejecución mientras se procesa el HTML.

Answer 4

Mientras empujamos datos en la variable de alcance podemos usar el siguiente código

$scope.enquiryLocationRow.push({''location'': EnqLocation.location, ''state_id'': Number(EnqLocation.state_id), ''country_id'': Number(EnqLocation.country_id)});

resolvió mi problema

Answer 5

Si sus valores son enteros, debe usar "" incluso si no son cadenas, esa simple razón es exactamente por qué está obteniendo una opción con un signo de interrogación como valor.

No deberías usar esto:

{ value: 0, name: "Pendiente" },
{ value: 1, name: "Em andamento" },
{ value: 2, name: "Erro" },
{ value: 3, name: "Enviar email" },
{ value: 4, name: "Enviado" }

Esta es la manera correcta:

{ value: "0", name: "Pendiente" },
{ value: "1", name: "Em andamento" },
{ value: "2", name: "Erro" },
{ value: "3", name: "Enviar email" },
{ value: "4", name: "Enviado" }

Si tienes al menos un registro que no está utilizando "", ¿obtendrás esto? valor de la opción.

Answer 6

Usar la siguiente sintaxis con ng-options solucionó este problema por mí:

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id" ng-options="country.id as country.name for country in countries">
  <option value="">Select Country</option>
</select>