Clear selected option in ui-select angular

angularjs ui-select
ffffff01 picture ffffff01 · Oct 15, 2014 · Viewed 73.3k times · Source

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.

Answer

exiadbq picture exiadbq · May 13, 2015

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.

Related questions

Angularjs ui-select dropdown on-select function call issue

In my AngularJS project I am using normal select dropdown and making a function call using ng-change which is perfectly working fine. Now I want to migrate the same dropdown to ui-select. But on-select function call is not working, I …

Read More
Allow manually entered text in ui-select

I am using a select box from ui-select. All is working fine, but I want to allow manually entered text and do not want to restrict the user from the values available in the list. If I type in text …

Read More
AngularJs: How make ui-select working properly?

THE SITUATION: I am making an angular app where I have to use ui-select: in the user info page, in the select have to be possible to choose one or many tag. It is almost working, except from the fact …

Read More