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.
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.
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:
The CSS:
On the directive code:
Note: if we used tagging and tagging-label="false" in that case allow-clear functionality not work.
Custom clear functionality
HTML Code
Controller action Code
There is an option
allow-clear
for ui-select-match that does the thing 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-matchQuick example:
Working example: http://plnkr.co/edit/DbbUE68QlNLjx97pBZ56?p=preview
You could add a small X button when you display the selection.
Then you stop the click event from bubbling up and trigger the open event. And you clear the field by overwriting the selected model.
Here's the plnkr. http://plnkr.co/edit/qY7MbR