Ng-options comment définir le premier choix toujours vide

J'utilise angularjs dans un projet et dans lequel j'utilise ng-options pour générer.

Initialement, lorsque les pages sont rechargées et aucun élément optionnel n'est sélectionné, le html généré comme ci-dessous:

<select size="3" ng-model="item" ng-options="s.name for s in itemlist"> <option value="?" selected="selected"></option> <option value="0">Item 1</option> <option value="1">Item 2</option> <option value="2">Item 3</option> </select>

Mais lorsque je sélectionne un élément (par exemple, l'élément 2), le premier choix vierge est terminé. Je sais qu'il se passe alors que ng-model est défini par une valeur sélectionnée. Mais je veux d'abord sélectionner toujours vierge afin que l'utilisateur puisse réinitialiser le filtre.

Merci d'avance.

Cela fera le travail pour vous:

 <select size="3" ng-model="item" ng-options="s.name for s in itemlist"> <option value="">Select Option</option> </select>

Pour ceux qui traitent «null» comme valeur valide pour l'une des options (alors imaginez que «null» est une valeur de l'un des éléments dans typeOptions dans l'exemple ci-dessous), j'ai trouvé le moyen le plus simple de m'assurer que l'ajout automatique 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-si et non ng-hide? Parce que vous voulez que les sélecteurs css qui ciblent la première option à l'intérieur de la liste ci-dessus sélectionnent pour cibler l'option "réelle", pas celle cachée. Il est utile lorsque vous utilisez Protractor pour e2e testing et (pour quelque raison que ce soit), vous utilisez by.css () pour sélectionner les options de sélection.

Kevin – Sưu Tầm

Il semble que votre meilleure option serait d'avoir l'élément vide inclus comme premier élément dans la liste des éléments.

Vous pouvez renoncer à utiliser les ng-options et utiliser ng-repeat place et rendre la première option vide. Voir l'exemple ci-dessous.

 <select size="3" ng-model="item"> <option value="?" selected="selected"></option> <option ng-repeat="s in itemlist" value="{{s.value}}">{{s.name}}</option> </select>

La solution ci-dessus va corrompre le modèle avec des données indésirables. Utilisez la directive pour réinitialiser le modèle de manière appropriée JS: option de sélection

 Directive" .directive('dropDown', function($filter) { return { require: 'ngModel', priority: 100, link: function(scope, element, attr, ngModel) { function parse(value) { if (value) { if(value === "") { return "crap" } else { return value; } } else { return; } } ngModel.$parsers.push(parse); } }; });

  <select ng-model="dataItem.platform_id" ng-options="item.id as item.value for item in platformList" ng-init="dataItem.platform_id=dataItem.platform_id||platformList[0].id"></select>

Manette

 $scope.item = ''; $scope.itemlist = { '' = '', 'Item 0' = 1, 'Item 1' = 2, 'Item 2' = 3 };

HTML

 <select data-ng-model="item" data-ng-options="v as k for (k, v) in itemlist"></select>