Pourquoi AngularJS inclut-il une option vide dans la sélection ?

Question

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

Voici la 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 ?

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

Answer 1

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 à l'option ng-options . Cela se produit pour éviter la sélection accidentelle d'un modèle : AngularJS peut voir que le modèle initial est soit indéfini soit ne fait pas partie de l'ensemble des 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, j'entends : parmi l'ensemble des options). Vous devez sélectionner une valeur de modèle valide pour vous débarrasser de cette option vide.

Answer 2

Si vous voulez une valeur initiale, consultez la réponse de @pkozlowski.opensource, qui, pour votre information, 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, dont la valeur est définie comme une chaîne vide, peut être imbriqué dans l'élément. Cet élément représentera alors l'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>

Answer 3

Angular < 1.4

Pour tous ceux qui considèrent que "null" est une valeur valide pour l'une des options (imaginez que "null" est une valeur de l'un des éléments de la liste des options), il n'y a pas de problème. typeOptions dans l'exemple ci-dessous), j'ai trouvé que la façon la 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-if et non pas ng-hide ? Parce que vous voulez que les sélecteurs css qui ciblent la première option dans la sélection ci-dessus ciblent la "vraie" option, pas celle qui est cachée. Cela devient utile lorsque vous utilisez Protractor pour les tests e2e et que (pour une raison quelconque) vous utilisez by.css() pour cibler les options de sélection.

Angular >= 1.4

En raison du remaniement des directives select et options, l'utilisation de la directive ng-if n'est plus une option viable, vous devez donc vous tourner vers ng-show="false" pour le faire fonctionner à nouveau.

Answer 4

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 vous débarrasser de l'option vide.

Answer 5

Oui, le ng-model créera une valeur d'option vide, lorsque la propriété du ng-model est indéfinie. Nous pouvons éviter cela si nous assignons un objet au ng-model.

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 l'objet du tableau comme $scope.collections[0] ou $scope.collections[1] au ng-model, n'utilisez pas les propriétés de l'objet. Si vous obtenez la valeur de l'option sélectionnée du serveur, en utilisant la fonction de rappel, assignez l'objet au ng-model.

NOTE du document Angular

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

J'ai essayé de nombreuses fois et j'ai fini par le trouver.