Angular ajoute des options étranges dans un élément sélectionné lors du réglage de la valeur du modèle

J'ai un élément sélectionné défini comme tel:

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

Tout fonctionne bien lorsque je ne définis aucun type de valeur dans la directive qui contient cet élément sélectionné. Mais quand je fais quelque chose comme newAddressForm.country_id = 98 , au lieu de sélectionner l'option avec la valeur 98, Angular envoie une nouvelle en haut de l'élément select, de la manière suivante:

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

Ce qui donne? Quel genre de format est-ce et pourquoi cela se produit-il? Notez que si je fais une console.log(newAddressForm.country_id) dans la directive, j'ai un "98" normal, c'est étrange dans le HTML généré.

Modifier: Mise à jour de la situation. Passé à l'aide de ng-select , mais le problème persiste.

L'élément étrange n'apparaît plus, mais maintenant il y a un autre élément au sommet, qui n'a qu'un point d'interrogation ? Comme valeur, et aucune étiquette.

C'est à partir de ce que j'ai recueilli, l'option "none selected" Angular. Je ne comprends toujours pas pourquoi il ne sélectionnera pas l'option que je lui dis pour sélectionner.

Faire newAddressForm.country_id = 98 ne donne toujours aucun résultat. Pourquoi donc?

Angular ne définit pas la valeur d'un élément sélectionné aux valeurs réelles de votre tableau et fait des choses internes pour gérer la liaison de l'étendue. Voir le premier commentaire de Mark Rajcok sur ce lien:

http://docs.angularjs.org/api/ng.directive:select

Lorsque l'utilisateur sélectionne l'une des options, Angular utilise l'index (ou la clé) pour rechercher la valeur dans le tableau (ou l'objet) – cette valeur recherchée est celle sur laquelle le modèle est configuré. (Donc, le modèle n'est pas défini sur la valeur que vous voyez dans le HTML! Cela provoque beaucoup de confusion.)

Je ne suis pas tout à fait sûr d'utiliser une ng-repeat est la meilleure option.

L'utilisation de 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 nombres entiers, vous devez utiliser "" même si ce ne sont pas des chaînes, cette simple raison 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 le bon moyen:

 { 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? Valeur d'option.

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

Pour une raison quelconque, la liste de sélection afficherait toujours une option supplémentaire à l'index zéro avec une valeur de "?", Mais lorsque j'ai changé la façon dont j'ai rempli mon option par défaut dans le contrôleur, ce problème s'est éloigné. Je remplissais les options sélectionnées en faisant un appel API, les remplissant dans une promesse. J'ai commis l'erreur de remplir mon option par défaut "sélectionner une option" comme la première chose que j'ai faite dans cette promesse, mais lorsque je l'ai fait en dehors de la promesse (avant de faire l'appel de l'API), les options sélectionnées ont peuplé le chemin Je les ai décrochés.

Je pense que l'option jessedvrs est une solution au problème (en définissant l'option par défaut dans le balisage HTML), mais si vous préférez remplacer vos options par javascript, je propose de définir l'option par défaut avant d'effectuer des appels vers une API Ou des processus qui peuvent toujours être exécutés pendant le rendu du HTML.

Lorsque vous attribuez une valeur à un élément sélectionné, AngularJS recherche la valeur fournie dans l'attribut de valeur des balises d'option dans cet élément sélectionné. Mais la capture 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 la variable que vous liez en utilisant ng-model est un nombre, AngularJS ne parvient pas à trouver l'élément d'option correspondant et, par conséquent, crée son propre élément comme celui-ci –

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

La solution est, en se liant, la convertir au type approprié.

Dans ce cas, la solution serait de lier un nombre 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()" >

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