web-dev-qa-db-fra.com

Effacer l'option sélectionnée dans ui-select angular

Quelqu'un sait comment effacer la valeur sélectionnée d'une boîte de sélection ui dans angular?

Je veux la fonctionnalité de select2 où vous avez un petit x dans la zone de sélection. Ne semble pas avoir la méthode allow-clear de select2 got.

angularjsui-select
53
ffffff01

Si vous utilisez le thème select2, il y a un allow-clear option sur le ui-select-match directive qui fait cela pour vous. Vous aurez le x à droite et vous pourrez le supprimer en cliquant dessus. https://github.com/angular-ui/ui-select/wiki/ui-select-match

Exemple rapide:

<ui-select-match allow-clear="true" placeholder="Select or search a country in the list...">
  <span>{{$select.selected.name}}</span>
</ui-select-match>

Exemple de travail: http://plnkr.co/edit/DbbUE68QlNLjx97pBZ56?p=preview

Cela ne fonctionne pas actuellement avec le thème bootstrap) ou selectize.

100
exiadbq

Vous pouvez ajouter un petit bouton X lorsque vous affichez la sélection.

<ui-select-match placeholder="Select or search a country in the list...">
  <span>{{$select.selected.name}}</span>
  <button class="clear" ng-click="clear($event)">X</button>
</ui-select-match>

Ensuite, vous arrêtez l'événement click de bouillonner et déclenchez l'événement open. Et vous effacez le champ en écrasant le modèle sélectionné.

$scope.clear = function($event) {
   $event.stopPropagation(); 
   $scope.country.selected = undefined;
};

Voici le plnkr. http://plnkr.co/edit/qY7MbR

34
Nic128

Si vous utilisez bootstrap, du point de vue de la conception, vous pouvez également utiliser une icône fa-remove.

En outre, du point de vue de la convivialité, vous souhaiterez peut-être aligner l'icône de suppression sur la gauche.

Le JS:

<ui-select-match placeholder="Select or find...">
    <button class="clear-btn" ng-click="clear($event)">
        <span class="fa fa-remove"></span>
    </button>
    <span class="clear-btn-offset">{{$select.selected}}</span>
</ui-select-match>

Le CSS:

.select2 .clear-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    position: absolute;
    left: -2px;
    top: 1px;
}

.clear-btn-offset {
    position: absolute;
    left: 25px;
}

Sur le code de la directive:

$scope.clear = function($event) {
   $event.stopPropagation();
   // Replace the following line with the proper variable
   $scope.country.selected = undefined;
};
6
Igor Lino

Remarque: si nous utilisions tagging et tagging-label = "false" dans ce cas, la fonctionnalité allow-clear ne fonctionnerait pas.

fonctionnalité d'effacement personnalisé

HTML Code

<ui-select-match placeholder=”Enter table…”>
 <span>{{$select.selected.description || $select.search}}</span>
 <a class=”btn btn-xs btn-link pull-right” ng-click=”clear($event, $select)”><i class=”glyphicon glyphicon-remove”></i></a>
</ui-select-match>

Code d'action du contrôleur

function clear($event, $select){ 
 //stops click event bubbling
 $event.stopPropagation(); 
 //to allow empty field, in order to force a selection remove the following line
 $select.selected = undefined;
 //reset search query
 $select.search = undefined;
 //focus and open dropdown
 $select.activate();
}
1
Dinesh Vaitage