Clear selected option in ui-select angular

Question

Anyone know how to clear the selected value of an ui-select box in angular?

I want the functionality of select2 where you have a small x in the selectbox. Doesn't look like it's got the allow-clear method that select2 got.

Osmic

Answer 1

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.

Cardio

Do you know how to get that event of clicking the allow clear 'x' button? It would help me to reset the dependent fields – Ornithic

While this is obvious in the documentation it is pretty annoying that you can only use a boolean but no callback for the allow-clear options... So this is pretty much useless to fire a callback and do something with the related data. – Disk

@GaneshBabu.T.Y github.com/angular-ui/ui-select/blob/master/dist/select.js#L561 that's the click event you are looking for. Unfortunately as @ burzum mentioned, the dependent field would require some extra work so you can have more control over it. You can well suggest the ui-select to have all those in a service so you can use decorators or have your own improvement. However that can be a separate question, and the original post only asked for clear the input functionality. – Cardio

the selectize theme does not have this option as of now. – Braynard

@Braynard click the Backspace will clear the selected value – Philipson

Answer 2

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

Clangor

@exiadbq's solution offers the same feature in a simpler way. – Lindbom

Yeah that works-- however, I would just like to add, there is now a built-in function so you don't need to add an additional method to the controller. You can just use ng-click="$select.clear($event)" and it would work great ;) This also goes through updating rendering and callbacks. – Rosewater

@JonathanReyes hi Jonathan, thank you very much for your comment. works perfecly in my case. =) – Simasimah

Answer 3

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

Klump

This is a really nice solution Igor. Thank you very much. This way looks better than the one suggested by Nic128. I only changed the CSS on .select2 .clear-btn because I wanted to see the X to the right and I replaced left: -2px; for right: 20px;. I didn't need to use .clear-btn-offset at all. – Aprilette

Of course you may still use what @Cardio mentioned, but I personally don't since the element structure and visual style is really better with the explicit button. – Klump

Answer 4

Note: if we used tagging and tagging-label="false" in that case allow-clear functionality 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();
}

Rudy

this would be best solution for when u have more than one ui-select filtering one grid. Tested and worked perfectly – Virgule