Clear selected option in ui-select angular

Question

Does anyone know how to clear the selected value of the ui selection window in angular?

I need select2 functionality where you have small x in selectbox. It doesn't look like it has a clear-clear method that select2 got.

Answer 1

There is an allow-clear option for ui-select-match that does the thing for you, you will have x on the right and you can clear it by clicking on it. https://github.com/angular-ui/ui-select/wiki/ui-select-match

Quick example:

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

Working example: http://plnkr.co/edit/DbbUE68QlNLjx97pBZ56?p=preview

Answer 2

When the selection is displayed, you can add a small X button.

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

Then you stop the click event from the bubbles and fire the open event. And you clear the field by overwriting the selected model.

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

Here plnkr. http://plnkr.co/edit/qY7MbR

Answer 3

If you use bootstrap from a design point of view, you can also use the fa-remove icon.

In addition, in terms of usability, you might want to align the delete icon on the left.

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> 

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

In the directive code:

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

Answer 4

Note: if we used tagging and tagging-label = "false", then the allow-clear function does not work.

Custom clear functionality

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> 

Controller action code

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