How to clear ui-select programmatically?

Question

I would like to find a way to clear the selection of a ui-select by code.

For example I have the following code

<ui-select ng-model="selectedCustomerCode" ng-if="CustomerIds.length>1" on-select="CustomerCodeFiltersOnSelectCallback($item, $model)" theme="bootstrap">
  <ui-select-match class="ui-select-match" allow-clear="true" placeholder="Επιλογή κωδικού πελάτη...">{{$select.selected.CCode}}</ui-select-match>
  <ui-select-choices class="ui-select-choices" repeat="customer in CustomerIds | propsFilter: {CCode: $select.search}">
    <div ng-bind-html="customer.CCode | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

I want to clink on a clear button and clear some inputs including the ui-select. What is the code in order to clear ui-select?

score 7 · Answer 1 · edited Nov 09 '18 at 09:47

The problem has been solved. I don't know why, but having only selectedCustomerCode in ng-model did not work properly. I assigned the selectedCustomerCode as an object:

ng-model="selectedCustomer.selectedCustomerCode"

then I was able to clear it like this:

selectedCustomer.selectedCustomerCode = ''

If I had

ng-model="selectedCustomerCode"

then reassigning it to:

selectedCustomerCode = ''

somehow does not work.

Abdellah Stands with Palestine · Accepted Answer · 2017-01-02T11:18:24.137

2

You should clear cont.selectedCustomerCode variable:

<button ng-click="cont.selectedCustomerCode = ''">clear</button>

Edit:

You should consider exposing you attributes on a variable. That's the recommended way.

edited Jan 02 '17 at 11:18

answered Jan 02 '17 at 09:26

Abdellah Stands with Palestine

5,032
1
26
36

This makes sense but I have already tried it and didn't work. The weird thing is that I put a
{{selectedCustomerCode}}
in my html and it shows nothing before or after any selection of the ui-select – vagelis Jan 02 '17 at 09:59
@vagelis i made an edit. Can you try my suggestion and tell me if it works? – Abdellah Stands with Palestine Jan 02 '17 at 11:19

score 1 · Answer 3 · answered Jan 02 '17 at 09:26

1

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-match

<ui-select-match allow-clear="true" placeholder="Select or search in a list...">
  <span>{{$select.selected.name}}</span>
</ui-select-match>

working example http://plnkr.co/edit/DbbUE68QlNLjx97pBZ56?p=preview

answered Jan 02 '17 at 09:26

Jitendra gupta

98
8

that could be a solution but I would like to do it by code from another button that clears all the html inputs that I have in the form. – vagelis Jan 02 '17 at 09:34
then on button click clear the ng-model .like $scope.selectedCustomerCode='' or {} or [] . whatever it is – Jitendra gupta Jan 02 '17 at 09:35
I have tried all of them but nothing seems to work. The weird thing is that I put a
{{selectedCustomerCode}}
in my html and it shows nothing before or after any selection of the ui-select – vagelis Jan 02 '17 at 09:52
then there is a only option is there – Jitendra gupta Jan 02 '17 at 10:01
first create a global object like :$scope.form={}; then define ng-model of each control like form.control1 or control 2 in the last on button click pass this on button click like ng-click="click(form)" . and in your controller make it empty . it will definitely work for u – Jitendra gupta Jan 02 '17 at 10:04
and also declare the object at the starting of controller code like – Jitendra gupta Jan 02 '17 at 10:08
$scope.form={control1NgModelName:""or {}, control2NgModelName:"" or {} and so on} – Jitendra gupta Jan 02 '17 at 10:09

score 0 · Answer 4 · answered Oct 02 '19 at 15:15

0

Another possible solution that I used today is to create an empty state by adding a clear element to the list repeated in the ui-select-choices

vm.CustomerIds.unshift({"CCode":"Select..."});

answered Oct 02 '19 at 15:15

LiefLayer

977
1
12
29

score 0 · Answer 5 · answered Dec 01 '22 at 12:58

What you can do in cases when in general you want ui-select cleared is to declare ng-model on your ui-select for example as:

ng-model="selectedCustomerCode.code"

and in your controlller you wold initialize object as:

$scope.selectedCustomerCode = {};

and whenever later in code you need this property cleared you would simply reinitialize it as follows:

$scope.selectedCustomerCode = {};

How to clear ui-select programmatically?

5 Answers5