Angular ajoute des options étranges dans l'élément select lors de la définition de la valeur du modèle

En utilisant la syntaxe suivante avec ng-options résolu ce problème pour moi:

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

Si vos valeurs sont des entiers, vous devez utiliser "" même si ce ne sont pas des chaînes, cette raison simple est exactement pourquoi vous obtenez une option avec un point d'interrogation en tant que valeur.

Vous ne devriez pas utiliser ceci:

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

C'est la bonne façon:

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

Si vous avez au moins un enregistrement qui n'utilise pas"", vous obtiendrez ceci ? la valeur d'option.

Je rencontrais ce même problème plus tôt ce soir, où j'ai vu une option select apparaître comme la première de ma liste même si Je ne l'ai pas explicitement créée. Je remplissais une liste d'options de sélection dans mon contrôleur et en utilisant la même syntaxe ng-options mentionnée ci-dessus par jessedvrs (sauf que j'insérais également l'option par défaut "sélectionner une option" dans le contrôleur plutôt que de la marquer dans le HTML comme il l'était).

Pour une raison quelconque, la liste de sélection afficherait toujours un option supplémentaire à l'indice zéro avec une valeur "?", mais quand j'ai changé comment j'ai rempli mon option par défaut dans le contrôleur, ce problème a disparu. Je remplissais les options de sélection en faisant un appel D'API, en les remplissant à l'intérieur d'une promesse. J'ai fait l'erreur de remplir également mon option "select an option" par défaut comme la première chose que j'ai faite dans cette promesse, mais quand je l'ai fait à la place en dehors de de la promesse (avant de faire l'appel API), les options select ont rempli la façon dont je les ai diminuées de.

Je pense que l'option jessedvrs est une solution au problème (définition de l'option par défaut dans le balisage HTML), mais si vous préférez remplir vos options en javascript à la place, je suggère de toujours définir l'option par défaut avant de faire des appels à une API ou des processus qui peuvent encore être en cours d'exécution pendant

Lorsque vous affectez une valeur à un élément select, AngularJS recherche la valeur fournie dans l'attribut value des balises d'option de cet élément select. Mais le hic est, AngularJS fait une comparaison basée sur le type . Donc, si les valeurs dans les balises d'option sont des chaînes (ce qui est généralement le cas) et que la variable que vous liez en utilisant ng-model est un nombre, AngularJS ne parvient pas à trouver l'élément option correspondant et crée donc son propre élément comme ceci -

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

La solution est, tandis que se lier, le convertir au type approprié.

Dans ce cas, la solution serait de lier un Entier

<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 les valeurs sont définies comme des chaînes, l'astuce serait d'utiliser

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

Tout en poussant des données sur la variable de portée, nous pouvons utiliser le code suivant

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

Il a résolu mon problème