Clear selected option in ui-select angular
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();
}
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;
};
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