Pourquoi AngularJS inclut une option vide dans select?

Si vous voulez une valeur initiale, voir @pkozlowski.réponse d'opensource, que FYI peut aussi ê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é dur, avec la valeur définie à une chaîne vide, peut être imbriqué dans l'élément. Cet élément représentera alors l'option "null" ou" not selected":

<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 quiconque traite" null "comme valeur valide pour l'une des options (donc imaginez que" null "est une valeur d'un des éléments dans typoeoptions dans l'exemple ci-dessous), j'ai trouvé que la façon la plus simple de s'assurer que l'option automatiquement ajoutée 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 non ng-hide? Parce que vous voulez des sélecteurs css qui ciblerait la première option à l'intérieur ci-dessus sélectionnez de cibler l'option "réel", pas celle qui est cachée. Il devient utile lorsque vous utilisez protractor pour le test e2e et (pour quelque raison que ce soit) vous utilisez par.(css) à la cible, sélectionnez options.

angulaire > = 1,4

en raison du remaniement des directives select et options, l'utilisation de ng-if n'est plus une option viable, vous devez donc vous tourner vers ng-show="false" pour que cela fonctionne à 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:

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

mettre le modèle en ligne. Utiliser ng-init pour se débarrasser de l'option vide

parmi les multitudes de réponses ici, j'ai pensé que je repousse la solution qui a fonctionné pour moi et a rencontré tous des conditions suivantes:

• fournit un placeholder/prompt lorsque le modèle ng est falsy (e.g. "--select region-- " W. value="" )
• lorsque la valeur du modèle ng est falsy et que l'utilisateur ouvre les options dropdown, le le paramètre est sélectionné (les autres solutions mentionnées ici font apparaître la première option sélectionnée qui peut être trompeuse)
• permet à l'utilisateur de désélectionner une valeur valide, en sélectionnant essentiellement la falsy / valeur par défaut à nouveau

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

original q&R - https://stackoverflow.com/a/32880941/1121919

quelque chose de semblable m'est arrivé aussi et a été causé par une mise à niveau à l'angle 1.5. ng-init semble être interprété pour type dans les nouvelles versions D'Angular. Dans l'Ancien angle ng-init="myModelName=600" serait la carte à une option avec la valeur" 600 "i.e. <option value="600">First</option> mais dans L'angle 1.5 il ne trouvera pas cela car il semble s'attendre à trouver une option avec la valeur 600 I. e <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>

une solution rapide:

select option:empty { display:none }

J'espère que ça aidera quelqu'un. Idéalement, la réponse choisie devrait être l'approche mais si dans le cas où ce n'est pas possible alors devrait fonctionner comme un patch.

Oui ng-modèle permettra de créer des vides valeur de l'option, lors de la ng-modèle bien défini. Nous pouvons éviter cela, si nous assignons objet à ng-model

exemple

angulaire de codage

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

assigner un objet de tableau comme $scope.recouvrement[0] ou $ scope.collections[1] ng-model, ne pas utiliser les propriétés de l'objet. si vous obtenez la valeur de l'option select du serveur, en utilisant call back fonction, assigner objet à ng-model

NOTE du document angulaire

Note: ngModel compare par référence, et non par valeur. Ceci est important lorsque vous vous liez à un tableau d'objets. voir l'exemple http://jsfiddle.net/qWzTb /

j'ai essayé beaucoup de fois, enfin je l'ai trouvé.

bien que tous les deux @pkozlowski.les réponses d'opensource et de @Mark sont correctes, j'aimerais 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'ai fait face à la même question. Si vous postez une forme angulaire avec un poteau normal, alors vous allez faire face à cette question, car angulaire ne vous permet pas de définir des valeurs pour les options de la façon dont vous avez utilisé. Si vous obtenez la valeur de ".tapez" alors vous allez trouver la bonne valeur. Vous devez poster l'objet angulaire qu'il se 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. Ce que vous faites de mal est, lorsque vous utilisez ng-options, il lit un objet, dites [{ 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, disons que vous voulez que la valeur sélectionnée soit 10, vous devez définir votre modèle à une valeur comme { id: 10, name: test } pour sélectionner 10, donc il ne va pas créer cette corbeille.

J'espère aide tout le monde à comprendre, j'ai eu un moment difficile essayer :)

j'utilise L'angle 1,4 x et j'ai trouvé cet exemple, donc j'ai utilisé ng-init pour définir la valeur initiale dans le select:

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

une solution simple est de définir une option avec une valeur vide "" j'ai trouvé que cela élimine l'option non définie supplémentaire.

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 il fonctionne est, que cela donne la première option à afficher avant de sélectionner quelque chose et le display:none le supprime de la liste déroulante donc si vous voulez, vous pouvez 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 le 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 controller, 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 fix:

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 select 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 quand nous écrivons value.listCount comme value.listName , il popule automatiquement le texte dans value.listName mais la valeur de l'option choisie est value.listCount bien que les valeurs que je montre normal 0,1,2 .. et ainsi de suite !!!

Dans mon cas, le financeRef.financeLimit est je prends le value.listCount et 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 passé. Si vous utilisez @ dans binding, la variable passée sera string et si les options sont par exemple. les entiers alors l'option vide apparaîtra.

analyser correctement la valeur init, ou lier avec < et non @ (moins recommandé pour la performance 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 quand 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' (supprimé "ng-model") a changé :

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

à ceci:

<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 son fonctionnement, mais dans mon cas, il a été car j'ai supprimé cette portée de ng.contrôleur, vérifiez si vous n'avez pas fait la même chose.

Salut j'ai eu quelques références mobiles jQUery et je les ai enlevées. Avec jQuery mobile l'une des corrections ci-dessus ne fonctionnait pas pour moi. ( Son grand, 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 dans 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">

Cette solution fonctionne pour moi:

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