Pourquoi AngularJS inclut-il une option vide dans select?

Je travaille avec AngularJS depuis quelques semaines et la seule chose qui me dérange vraiment, c’est que même après avoir essayé toutes les permutations ou la configuration définie dans la spécification, allez à http://docs.angularjs.org/api/ng .directive: select , je reçois toujours une option vide comme premier enfant de l’élément select.

Voici le jade:

select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions'); 

Voici le contrôleur:

 $scope.typeOptions = [ { name: 'Feature', value: 'feature' }, { name: 'Bug', value: 'bug' }, { name: 'Enhancement', value: 'enhancement' } ]; 

Enfin, voici le HTML qui est généré:

   Feature Bug Enhancement  

Que dois-je faire pour m’en débarrasser?

PS: Les choses fonctionnent également sans cela, mais cela semble étrange si vous utilisez select2 sans sélection multiple.

L’ option vide est générée lorsqu’une valeur référencée par ng-model n’existe pas dans un ensemble d’options passées à ng-options . Cela empêche la sélection accidentelle du modèle: AngularJS peut voir que le modèle initial est indéfini ou non dans l’ensemble des options et ne veut pas décider lui-même de la valeur du modèle.

Si vous voulez vous débarrasser de l’option vide, sélectionnez simplement une valeur initiale dans votre contrôleur, par exemple:

 $scope.form.type = $scope.typeOptions[0].value; 

Voici le jsFiddle: http://jsfiddle.net/MTfRD/3/

En résumé: l’option vide signifie qu’aucun modèle valide n’est sélectionné (j’entends par valide dans l’ensemble d’options). Vous devez sélectionner une valeur de modèle valide pour supprimer cette option vide.

Si vous voulez une valeur initiale, consultez la réponse de @pkozlowski.opensource, que FYI peut également implémenter dans la vue (plutôt que dans le contrôleur) en utilisant ng-init:

  

Si vous ne voulez pas de valeur initiale, “un seul élément codé en dur, avec la valeur définie sur une chaîne vide, peut être nested dans l’élément. Cet élément représentera alors une option nulle ou” non sélectionnée “:

  

Angulaire <1.4

Pour ceux qui traitent “null” comme valeur valide pour l’une des options (imaginez donc que “null” est la valeur de l’un des éléments de typeOptions dans l’exemple ci-dessous), j’ai trouvé le moyen le plus simple l’option est cachée est d’utiliser ng-if.

  

Pourquoi ng-if et non ng-hide? Parce que vous voulez que les sélecteurs CSS qui ciblent la première option au-dessus choisissent de cibler l’option “réelle”, pas celle qui est cachée. Cela devient utile lorsque vous utilisez un protractor pour les tests e2e et (pour quelque raison que ce soit) que vous utilisez by.css () pour cibler des options sélectionnées.

Angulaire> = 1.4

En raison du refactoring des directives select et options, utiliser ng-if n’est plus une option viable, vous devez donc vous tourner vers ng-show="false" pour le faire fonctionner à nouveau.

Peut-être utile pour quelqu’un:

Si vous voulez utiliser des options simples au lieu de ng-options, vous pouvez faire comme ci-dessous:

  

Définissez le modèle en ligne. Utilisez ng-init pour vous débarrasser de l’option vide

Parmi les multitudes de réponses ici, j’ai pensé que je republierais la solution qui a fonctionné pour moi et a rencontré toutes les conditions suivantes:

  • fourni un espace réservé / invite lorsque le ng-modèle est falsy (par exemple “–select region–” w. value="" )
  • Lorsque la valeur ng-model est falsy et que l’utilisateur ouvre la liste déroulante des options, l’espace réservé est sélectionné (les autres solutions mentionnées ici font apparaître la première option sélectionnée qui peut être trompeuse)
  • permettre à l’utilisateur de désélectionner une valeur valide, en sélectionnant essentiellement la valeur falsy / default à nouveau

entrer la description de l'image ici

code

  

src

Q & A original – https://stackoverflow.com/a/32880941/1121919

Quelque chose de semblable m’arrivait aussi et a été provoqué par une mise à niveau vers 1,5 angular. ng-init semble être analysé pour le type dans les nouvelles versions de Angular. Dans l’ancienne version angular, ng-init="myModelName=600" correspondrait à une option de valeur “600”, c.-à-d. mais dans Angular 1.5, cela ne semble pas être le cas. attendez-vous à trouver une option avec la valeur 600, c’est-à-dire . Angular insère alors un premier élément aléatoire:

  

Angulaire <1.2.x

  

Angulaire> 1,2

  

Une solution rapide:

 select option:empty { display:none } 

J’espère que ça aide quelqu’un. Idéalement, la réponse choisie devrait être l’approche, mais si cela n’est pas possible, alors devrait fonctionner comme un patch.

Oui ng-model créera une valeur d’option vide lorsque la propriété ng-model n’est pas définie. Nous pouvons éviter cela si nous assignons un object à ng-model

Exemple

codage angular

 $scope.collections = [ { name: 'Feature', value: 'feature' }, { name: 'Bug', value: 'bug' }, { name: 'Enhancement', value: 'enhancement'} ]; $scope.selectedOption = $scope.collections[0];  

Note importante:

Affectez un object de tableau comme $ scope.collections [0] ou $ scope.collections [1] à ng-model, n’utilisez pas les propriétés de l’object. Si vous obtenez une valeur d’option sélectionnée du serveur, en utilisant la fonction de rappel, affectez un object à ng-model

NOTE du document angular

Remarque: ngModel se compare par référence et non par valeur. Ceci est important lors de la liaison à un tableau d’objects. voir un exemple http://jsfiddle.net/qWzTb/

J’ai essayé beaucoup de fois finalement je l’ai trouvé.

Bien que les réponses de @pkozlowski.opensource et de @ Mark soient correctes, je voudrais partager ma version légèrement modifiée où je sélectionne toujours le premier élément de la liste, quelle que soit sa valeur:

  

J’ai fait face au même problème. Si vous publiez une forme angular avec une publication normale, vous rencontrerez ce problème, car angular ne vous permet pas de définir des valeurs pour les options de la manière dont vous les avez utilisées. Si vous obtenez la valeur de “form.type”, vous trouverez la bonne valeur. Vous devez poster l’object angular lui-même pas la forme post.

Ok, en fait la réponse est très simple: quand il y a une option non reconnue par Angular, elle inclut une option terne. Qu’est-ce que vous faites mal, quand vous utilisez ng-options, il lit un object, disons [{ id: 10, name: test }, { id: 11, name: test2 }] right?

C’est ce que votre valeur de modèle doit être pour l’évaluer comme égale, si vous voulez que la valeur sélectionnée soit 10, vous devez définir votre modèle sur une valeur telle que { id: 10, name: test } pour sélectionner 10, NE PAS créer cette corbeille.

J’espère que ça aide tout le monde à comprendre, j’ai eu du mal à essayer 🙂

J’utilise Angular 1.4x et j’ai trouvé cet exemple, donc j’ai utilisé ng-init pour définir la valeur initiale dans la sélection:

  

Une solution simple consiste à définir une option avec une valeur vide "" J’ai trouvé que cela éliminait l’option non définie supplémentaire.

Cela a fonctionné pour moi

  

Cela fonctionne parfaitement bien

  

de cette manière, cela donne la première option à afficher avant de sélectionner quelque chose et l’ display:none supprime de la liste déroulante, donc si vous le voulez, vous pouvez le faire.

  

et cela vous donnera la select and option avant de sélectionner, mais une fois sélectionné, il disparaîtra et il n’apparaîtra pas dans la liste déroulante.

Essayez celui-ci dans votre contrôleur, dans le même ordre:

 $scope.typeOptions = [ { name: 'Feature', value: 'feature' }, { name: 'Bug', value: 'bug' }, { name: 'Enhancement', value: 'enhancement' } ]; $scope.form.type = $scope.typeOptions[0]; 

Voici le correctif:

pour un exemple de données comme:

 financeRef.pageCount = [{listCount:10,listName:modelSsortingngs.COMMON_TEN_PAGE}, {listCount:25,listName:modelSsortingngs.COMMON_TWENTYFIVE_PAGE}, {listCount:50,listName:modelSsortingngs.COMMON_FIFTY_PAGE}]; 

L’option de sélection devrait être comme ceci: –

  

Le point étant lorsque nous écrivons value.listCount tant que value.listName , il remplit automatiquement le texte dans value.listName mais la valeur de l’option sélectionnée est value.listCount bien que les valeurs my show soient normales 0,1,2 .. et ainsi de suite !!!

Dans mon cas, financeRef.financeLimit fait value.listCount et je peux effectuer ma manipulation de manière dynamic dans le contrôleur.

J’aimerais append que si la valeur initiale provient d’une liaison d’un élément parent ou d’un composant 1.5, assurez-vous que le type correct est passé. Si vous utilisez @ dans la liaison, la variable passée sera une chaîne et si les options sont par exemple. entiers alors l’option vide apparaîtra.

Soit parsingr correctement la valeur dans init, ou la liaison avec < et non @ (moins recommandé pour la performance, sauf si nécessaire).

Solution simple

  

Une solution de grind avec jQuery quand vous n’avez pas le contrôle des options

html:

  

js:

 $scope.init = function () { jQuery('#selector option:first').remove(); $scope.selector=jQuery('#selector option:first').val(); } 

Si vous utilisez ng-init votre modèle pour résoudre ce problème:

  

J’ai eu le même problème, je (enlevé “ng-model”) a changé ceci:

  

pour ça:

  

maintenant son fonctionnement, mais dans mon cas, il a été supprimé parce que cette scope de ng.controller, vérifiez si vous n’avez pas fait la même chose.

Bonjour, j’ai eu quelques références mobiles jQUery et je les ai enlevées. Avec jQuery Mobile, aucun des correctifs ci-dessus ne fonctionnait pour moi. (C’est génial si quelqu’un peut expliquer le conflit entre jQuery Mobile et Angular JS)

https://guntucomputerhacks.blogspot.com.au/2017/10/angular-js-drop-down-first-options-vs.html

La seule chose qui a fonctionné pour moi est d’utiliser track by in ng-options , comme ceci:

   

Cette solution fonctionne pour moi: