Functionality to clear all items.

[assyme]

I would like to clear all my items programmatically. Please find below my current use case.

I have drop down with list of countries.
Based on the countries, i query and show results in the ion-autocomplete. Incase a user has selected multiple options and then wishes to change the country, i would like to clear the selected items.

I tired clearing the items from the bound model (ngModel). Although it clears the text from the readonly input, the autocomplete still shows the selected items.

[guylabs]

Hi Asad,

ok I see, but aren't the users able to delete these by themselves with the trash icon beside each entry? And at what condition do you clear the selected items if the user is able to select multiple or a single one?

The selected items list is set inside the isolated scope of the autocomplete component and cannot be changed from the outside by now.

So you would just want a new button which clears all the selected items or do you want to have access to them from the outside?

Thanks and regards,

Guy

[assyme]

Hi guylabs,

The users will be able to delete by themselves, but i don't want to rely on them for some scenarios. So having access to them from outside will be super helpful.

I was planning to have a $watch on the ngModel within your directive, so that if i clear the value, the directive can just clear the selected items.

If i get enough time, i might send you a pull request for it.

Thanks and regards,

Asad

[guylabs]

Hi Asad,

I just updated the master with a new attribute called selected-items where you are able to get the selected items on a model value and then clear this programmatically as needed. Please also have a look at the documentation: https://github.com/guylabs/ion-autocomplete#selected-items

I hope this solves your issues. Can you please test it and come back to me such that I can close the issue?

Thanks and regards,

Guy

[guylabs]

Hi,

any news on this? I want to release 0.3.1 asap such that all can update to a proper version. ;)

Thanks and regards,

Guy

[assyme]

Hi Guy,

Sorry for not turning back quick. I tried upgrading to the latest version
of the fix, but it kinda broke the functionality all together. Since i was
busy with something else, i reverted the change. Give me a day or 2 and i
will test properly and get back to you.

Thanks & Best Regards,
Asad Palekar

On Fri, Sep 18, 2015 at 12:25 AM, Guy Brand [email protected]
wrote:

Hi,

any news on this? I want to release 0.3.1 asap such that all can update to
a proper version. ;)

Thanks and regards,

Guy

—
Reply to this email directly or view it on GitHub
#66 (comment)
.

[assyme]

Hi Guy,

I am afraid, i am not able to make it work. I added a binding to the selected-items attribute and tried clearing it by assigning an empty array to it. Yet, the popup shows old selected values. I am not sure what am i missing here.

following is how i set it up:

<input type="text" readonly="readonly" class="ion-autocomplete"
                   ion-autocomplete ng-model="locations.locations"
                   placeholder="Search locations"
                    autocomplete="off"
                   items-method="getLocations(query)"
                    multiple-select="true"
                   item-view-value-key="label"
                    selected-items="locations.selected"/>

and the controller has:

scope.$watch('locations.country',function(v){
               console.log("clear my locations");
                scope.locations.locations = [];
                scope.locations.clear = [];
                scope.locations.selected = [];
            });

Best,
Asad

[guylabs]

Hi Asad,

ok strange. Could you maybe create a reproducible codepen where I can see the issue?

Thanks and sorry for my late response,

Guy

[guylabs]

Hi Asad,

could you maybe have a look at my last commit for this issue and check the https://github.com/guylabs/ion-autocomplete#external-model documentation and try it again? The selected-items attribute has been removed in favor of the external-model.

Thanks and regards,

Guy

[assyme]

Hi Guy,

I am trying to create a code pen to show my problem .
http://codepen.io/anon/pen/xwLBOP

But i have no idea whats going on.

Could you help me with this?

Regards,
Asad Palekar

On Tue, Oct 13, 2015 at 9:50 AM, Guy Brand [email protected] wrote:

Hi Asad,

could you maybe have a look at my last commit for this issue and check the
https://github.com/guylabs/ion-autocomplete#external-model documentation
and try it again? The selected-items attribute has been removed in favor
of the external-model.

Thanks and regards,

Guy

—
Reply to this email directly or view it on GitHub
#66 (comment)
.

[guylabs]

Hi Asad,

can you please try the https://github.com/guylabs/ion-autocomplete/blob/master/test/e2e/ion-autocomplete.prepopulated.e2e.html from the master? Just clone the repository and then open the html file and this one should work with the clear button.

Can you please verify and give me feedback?

Thanks and regards,

Guy

[assyme]

Thanks Guy,

The external model attribute worked for me. :)

But i was wondering why not club the external-model and ngModel together?
This way, if i clear the ngModel, it will clear the externalModel value?

Regards,
Asad

On Fri, Oct 16, 2015 at 8:52 AM, Guy Brand [email protected] wrote:

Hi Asad,

can you please try the
https://github.com/guylabs/ion-autocomplete/blob/master/test/e2e/ion-autocomplete.prepopulated.e2e.html
from the master? Just clone the repository and then open the html file
and this one should work with the clear button.

Can you please verify and give me feedback?

Thanks and regards,

Guy

—
Reply to this email directly or view it on GitHub
#66 (comment)
.

[guylabs]

Hi Asad,

ok nice. Then I will close the issue now. The thing is that the logic how I select the items etc. wont work with the ngModel itself as then it will create an infinite loop. Therefore I need to have the externalModel for prepopulating/clearing the items.

Thanks and regards,

Guy