Pourquoi AngularJS inclut 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 à http://docs.angularjs.org/api/ng .directive: select , je reçois toujours une option vide en tant que 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é:

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

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.

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

Si vous voulez vous débarrasser de l'option vide, sélectionnez simplement une valeur initiale dans votre contrôleur, quelque chose comme:

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

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

En bref: l'option vide signifie qu'aucun modèle valide n'est sélectionné (par valide je veux dire: parmi l'ensemble des options). Vous devez sélectionner une valeur de modèle valide pour vous débarrasser de cette option vide.

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

<select ng-model="form.type" required="required" ng-init="form.type='bug'"
  ng-options="option.value as option.name for option in typeOptions" >
</select>

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 imbriqué dans l'élément. Cet élément représentera alors une option nulle ou" non sélectionnée "":

<select ng-model="form.type" required="required"
  ng-options="option.value as option.name for option in typeOptions" >
    <option style="display:none" value="">select a type</option>
</select>

Angulaire <1,4

Pour tous ceux qui traitent "null" comme une valeur valide pour l'une des options (alors imaginez que "null" est une valeur de l'un des éléments de typeOptions dans l'exemple ci-dessous), j'ai trouvé le moyen le plus simple de vous assurer que automatiquement ajouté L'option est cachée est d'utiliser ng-if.

<select ng-options="option.value as option.name for option in typeOptions">
    <option value="" ng-if="false"></option>
</select>

Pourquoi ng-if et pas ng-hide? Parce que vous voulez que les sélecteurs css qui ciblent la première option à l'intérieur ci-dessus sélectionnent pour cibler l'option "réelle", pas celle qui est cachée. Il devient utile lorsque vous utilisez le rapporteur pour les tests e2e et (pour une raison quelconque) vous utilisez by.css () pour cibler les options de sélection.

Angulaire> = 1,4

En raison de la refactorisation des directives select et options, l'utilisation ng-ifn'est plus une option viable, vous devez donc vous tourner ng-show="false"pour la faire fonctionner à nouveau.

Peut-être utile pour quelqu'un:

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

<select ng-model="sortorder" ng-init="sortorder='publish_date'">
  <option value="publish_date">Ascending</option>
  <option value="-publish_date">Descending</option>
</select>

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

Quelque chose de similaire m'arrivait aussi et était causé par une mise à niveau vers angular 1.5. ng-initsemble être analysé pour le type dans les nouvelles versions d'Angular. Dans les versions plus anciennes, Angular mapperait ng-init="myModelName=600"sur une option avec une valeur "600", <option value="600">First</option>mais dans Angular 1.5, il ne trouverait pas cela car il semble s'attendre à trouver une option avec une valeur 600 ie <option value=600>First</option>. Angular insèrerait alors un premier élément aléatoire:

<option value="? number:600 ?"></option>

Angulaire <1.2.x

<select ng-model="myModelName" ng-init="myModelName=600">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Angulaire> 1,2

<select ng-model="myModelName" ng-init="myModelName='600'">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Parmi la multitude de réponses ici, je me suis dit que je republierais la solution qui fonctionnait pour moi et remplissait toutes les conditions suivantes:

• fourni un espace réservé / invite lorsque le modèle ng est faux (par exemple "--select region--" w.value="" )
• lorsque la valeur du modèle ng est fausse 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, ce qui peut être trompeur)
• permettre à l'utilisateur de désélectionner une valeur valide, en sélectionnant essentiellement à nouveau la valeur falsifiée / par défaut

code

<select name="market_vertical" ng-model="vc.viewData.market_vertical"
    ng-options="opt as (opt | capitalizeFirst) for opt in vc.adminData.regions">

    <option ng-selected="true" value="">select a market vertical</option>
</select>

src

questions et réponses originales - https://stackoverflow.com/a/32880941/1121919

Une solution rapide:

select option:empty { display:none }

J'espère que cela aide quelqu'un. Idéalement, la réponse choisie devrait être l'approche, mais si ce n'est pas possible, elle 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 objet au modèle ng

Exemple

codage angulaire

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

$scope.selectedOption = $scope.collections[0];


<select class='form-control' data-ng-model='selectedOption' data-ng-options='item as item.name for item in collections'></select>

Note importante:

Assignez un objet du tableau comme $ scope.collections [0] ou $ scope.collections [1] à ng-model, n'utilisez pas les propriétés d'objet. si vous obtenez la valeur de l'option de sélection du serveur, en utilisant la fonction de rappel, affectez l'objet au modèle ng

NOTE du document angulaire

Remarque: ngModel compare par référence, pas par valeur. Ceci est important lors de la liaison à un tableau d'objets. 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 @ 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:

<select ng-options="option.value as option.name for option in typeOptions" ng-init="form.type=typeOptions[0].value">
</select>

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

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.id for item in items"></select>

J'ai fait face au même problème. Si vous publiez un formulaire angulaire avec une publication normale, vous serez confronté à ce problème, car angulaire ne vous permet pas de définir des valeurs pour les options de la manière que vous avez utilisée. Si vous obtenez la valeur de "form.type", vous trouverez la bonne valeur. Vous devez publier l'objet angulaire lui-même et non le formulaire.

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

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

Voici ce que doit être la valeur de votre modèle pour l'évaluer comme égale, disons que vous voulez que la valeur sélectionnée soit 10, vous devez définir votre modèle sur une valeur comme { id: 10, name: test } pour sélectionner 10, donc il ne créera PAS cette corbeille.

J'espère que cela aide tout le monde à comprendre, j'ai eu du mal à essayer :)

Cette solution fonctionne pour moi:

<select ng-model="mymodel">    
   <option ng-value="''" style="display:none;" selected>Country</option>
   <option value="US">USA</option>
</select>

Cela a fonctionné pour moi

<select ng-init="basicProfile.casteId" ng-model="basicProfile.casteId" class="form-control">
     <option value="0">Select Caste....</option>
     <option data-ng-repeat="option in formCastes" value="{{option.id}}">{{option.casteName}}</option>
 </select>

Cela fonctionne parfaitement bien

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value=""></option>
</select>

la façon dont cela fonctionne est que cela donne la première option à afficher avant de sélectionner quelque chose et le display:nonesupprime du menu déroulant donc si vous voulez, vous pouvez le faire

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value="">select an option...</option>
</select>

et cela vous donnera la select and option avant de sélectionner mais une fois sélectionné, il disparaîtra et ne s'affichera 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 échantillon de données comme:

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

L'option de sélection doit être comme ceci: -

<select ng-model="financeRef.financeLimit" ng-change="financeRef.updateRecords(1)" 
class="perPageCount" ng-show="financeRef.showTable" ng-init="financeRef.financeLimit=10"
ng-options="value.listCount as value.listName for  value in financeRef.pageCount"
></select>

Le point étant lorsque nous écrivons en value.listCounttant que value.listName, il remplit automatiquement le texte value.listNamemais la valeur de l'option sélectionnée estvalue.listCount bien que les valeurs mes soient normales 0,1,2 .. et ainsi de suite !!!

Dans mon cas, le financeRef.financeLimitsaisit en fait le value.listCountet je peux faire ma manipulation dans le contrôleur dynamiquement.

Je voudrais ajouter 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 approprié est transmis. Si vous utilisez@ dans la liaison, la variable passée sera une chaîne et si les options sont par exemple. entiers, puis l'option vide apparaîtra.

Soit analyser correctement la valeur dans init, soit lier avec <et non @(moins recommandé pour les performances sauf si nécessaire).

Solution simple

<select ng-model='form.type' required><options>
<option ng-repeat="tp in typeOptions" ng-selected="    
{{form.type==tp.value?true:false}}" value="{{tp.value}}">{{tp.name}}</option>

Une solution de mouture avec jQuery lorsque vous n'avez pas le contrôle des options

html:

<select id="selector" ng-select="selector" data-ng-init=init() >
...
</select>

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:

<select ng-model="foo" ng-app ng-init="foo='2'">

j'ai eu le même problème, j'ai (supprimé "ng-model") changé ceci:

<select ng-model="mapayear" id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

pour ça:

<select id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

maintenant ça marche, mais dans mon cas, c'est parce que j'ai supprimé cette portée de ng.controller, vérifiez si vous n'avez pas fait la même chose.

Salut, j'avais quelques références mobiles jQUery et je les ai supprimées. Avec jQuery mobile, aucune des corrections 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 bydans ng-options, comme ceci:

 <select class="dropdown" ng-model="selectedUserTable" ng-options="option.Id as option.Name for option in userTables track by option.Id">

Reportez-vous à l'exemple de la documentation angularjs pour résoudre ces problèmes.

1. Accédez à ce lien de documentation ici
2. Rechercher ' Sélection de liaison à une valeur non chaîne via l'analyse / formatage ngModel '
3. Là, vous pouvez y voir, la directive appelée ' convertToNumber ' résout le problème.

Ça marche pour moi. Peut également voir comment cela fonctionne ici

Nous pouvons utiliser CSS pour masquer la première option, mais cela ne fonctionnera pas dans IE 10, 11. La meilleure façon est de supprimer l'élément à l'aide de Jquery. Cette solution fonctionne pour les principaux navigateurs testés dans Chrome et IE10, 11

Aussi, si vous utilisez angulaire, parfois en utilisant setTimeout fonctionne

$scope.RemoveFirstOptionElement = function (element) {
    setTimeout(function () {
        $(element.children()[0]).remove();
    }, 0);
};