59

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.

exiadbq
  • 1,619
  • 2
  • 14
  • 18
ffffff01
  • 5,068
  • 11
  • 52
  • 61

4 Answers4

109

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.

Andy
  • 4,901
  • 5
  • 35
  • 57
exiadbq
  • 1,619
  • 2
  • 14
  • 18
  • 3
    Do you know how to get that event of clicking the allow clear 'x' button? It would help me to reset the dependent fields – Ganesh Babu Aug 28 '15 at 13:19
  • 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. – floriank Sep 03 '15 at 14:39
  • 1
    @GaneshBabu.T.Y https://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. – exiadbq Sep 04 '15 at 01:11
  • 2
    the selectize theme does not have this option as of now. – Jonathan Feb 05 '16 at 18:22
  • @Jonathan click the Backspace will clear the selected value – lschin Mar 11 '16 at 02:48
37

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

Nic128
  • 472
  • 4
  • 8
  • 1
    @exiadbq's solution offers the same feature in a simpler way. – Jocelyn Aug 10 '15 at 07:26
  • 5
    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. – Jonathan Reyes May 18 '16 at 06:17
  • @JonathanReyes hi Jonathan, thank you very much for your comment. works perfecly in my case. =) – Ken Flake Apr 17 '19 at 10:15
6

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;
};
Sebastian D'Agostino
  • 1,575
  • 2
  • 27
  • 44
Igor Lino
  • 532
  • 7
  • 10
  • 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. – Sebastian D'Agostino Apr 21 '15 at 18:01
  • Of course you may still use what @exiadbq mentioned, but I personally don't since the element structure and visual style is really better with the explicit button. – Igor Lino May 20 '15 at 07:36
2

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();
}
Dinesh Vaitage
  • 2,983
  • 19
  • 16