Clear Selected Option In Ui-select Angular

Answer :

If you are using the select2 theme there is an allow-clear option on the ui-select-match directive that does this for you. You will have the x on the right and you can clear it by clicking 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

This does not currently work using either the bootstrap or selectize theme.

You could add a small X button when you display the selection.

<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 bubbling up and trigger the open event. And you clear the field by overwriting the selected model.

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

Here's the plnkr. http://plnkr.co/edit/qY7MbR

If you are using bootstrap, from design perspective, you could also use a fa-remove icon.

Additionally, from usability perspective, you may want to align the remove icon to the left.

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

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

On the directive code:

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