web-dev-qa-db-fra.com

ng-options comment définir la première sélection toujours vide

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

Initialement, lorsque l'élément de page est rechargé et qu'aucun élément d'option n'est sélectionné, le code HTML généré se présente comme suit

<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 (ex. Élément 2), la première sélection vide est supprimée. Je sais que cela se produit lorsque ng-model est défini par select value. Mais je veux d'abord sélectionner toujours vide pour que l'utilisateur puisse réinitialiser le filtre.

Merci d'avance.

javascriptangularjsoptions
50
arnold

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

Pour tous ceux qui traitent "null" comme valeur valide pour l'une des options (imaginez que "null" soit la valeur de l'un des éléments de typeOptions dans l'exemple ci-dessous), j'ai trouvé le moyen le plus simple de s'assurer que ajouté L’option cachée consiste à 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 que les sélecteurs css qui ciblent la première option ci-dessus sélectionnent l'option "réelle", et non celle qui est cachée. Cela devient utile lorsque vous utilisez protractor pour tester e2e et (quelle que soit la raison) vous utilisez by.css () pour cibler des options de sélection.

Kevin - Sưu Tầm

10
Kevin Black

Vous pouvez renoncer à utiliser le ng-options et utiliser ng-repeat à la place et laisser la première option vide. Voir 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>
2
m.e.conroy

Il semble que votre meilleure option serait d'avoir l'élément vierge inclus en tant que premier élément de la liste d'éléments.

1
Juliane Holzt

La solution ci-dessus corrompra le modèle avec des données indésirables. Veuillez utiliser la directive pour réinitialiser le modèle correctement. JS: Sélectionnez Option 

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

        }
    };
});
1
user5971409

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>
0
Khaled Ebdelli
        <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>
0
image72