Question 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 à 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 code 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?

P.S .: Les choses fonctionnent sans cela aussi, mais cela semble étrange si vous utilisez select2 sans sélection multiple.


604
2017-09-29 17:04


origine


Réponses:


Le vide option est généré lorsqu'une valeur référencée par ng-model n'existe pas dans un ensemble d'options passées à ng-options. Cela permet d'éviter une sélection accidentelle de 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 seul 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, 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: à partir de l'ensemble des options). Vous devez sélectionner une valeur de modèle valide pour se débarrasser de cette option vide.


610
2017-09-29 17:26



Si vous voulez une valeur initiale, voir la réponse @ pkozlowski.opensource, laquelle FYI peut également être implémentée 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" non sélectionnée "ou" null ":

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

217
2017-12-10 21:09



Angulaire <1.4

Pour tout le monde qui traite "null" comme valeur valide pour l'une des options (imaginez donc que "null" est une valeur de l'un des éléments dans typeOptions dans l'exemple ci-dessous), j'ai trouvé que le moyen le plus simple de s'assurer que l'option ajoutée automatiquement 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-si et non ng-hide? Parce que vous voulez que les sélecteurs CSS qui cibleraient la première option à l'intérieur ci-dessus choisissent de cibler l'option "réelle", pas celle qui est cachée. Cela devient utile lorsque vous utilisez protractor pour le test e2e et (pour une raison quelconque) vous utilisez by.css () pour cibler les options de sélection.

Angulaire> = 1.4

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


115
2018-06-20 06:48



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>

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


36
2017-08-28 13:32



Parmi la multitude de réponses ici, j'ai pensé que je republier la solution qui a fonctionné pour moi et rencontré tout des conditions suivantes:

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

enter image description here

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

q & a d'origine - https://stackoverflow.com/a/32880941/1121919


20
2018-04-27 14:53



Quelque chose de similaire m'arrivait aussi et a été causé par une amélioration de 1.5 angulaire.ng-init semble être analysé pour type dans les versions plus récentes d'Angular. Dans l'ancien Angular ng-init="myModelName=600" correspondrait à une option avec la valeur "600", c'est-à-dire <option value="600">First</option> mais dans Angular 1.5 il ne trouvera pas ceci comme il semble s'attendre à trouver une option avec la valeur 600 i.e <option value=600>First</option>. Angulaire insère 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>

19
2018-03-17 14:47



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, elle devrait fonctionner comme un correctif.


15
2018-02-27 19:41



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:

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

NOTE du document angulaire

Note: 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é.


13
2017-07-16 16:47



Bien que les deux réponses @ pkozlowski.opensource et @ Mark soient 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>

8
2018-06-11 18:02