angular-multi-select

angular-multi-select copied to clipboard

I am new to angularjs. My question is how do I refresh the directive when another button is clicked. Basically I want to call the Reset action of the directive on click of another button. Is it possible?

This is a very ugly solution but it does work. Make your button call clear(), note that you need to inject $timeout inside your controller.

    $scope.clear = function()
    {
        var element = angular.element(document.querySelector('.multiSelect .reset'));
        $timeout(function()
        {
            element[0].click();
        })            
    }

Hi @SachetRay ,

Reseting the directive is actually simple. Let's just utilize what AngularJs has provided.

Let's say this is your directive definition:

<div 
    isteven-multi-select
    input-model="data1"
    ....
>
</div>

First, make a copy of your input-model. Say.. data2 = angular.copy( data1 )

Then, when you're going to reset, just copy data2 back to data1, like.. data1 = angular.copy( data2 )

That's it.

1. $scope.data1 = angular.copy($scope.data2);

2. _.each($scope.data1, function (datum) {
       datum.selected = false;
   });
   

I even tried to loop and negate it. Doesn't work with version 3 but it works with version 2.

@deejaygeekout

Basically you need to make a back up of your original data. Then, when you're going to reset, just feed that back up data into the input model.

I was unable to clear the selected items and button label by updating the input model. However, the method provided by @serge-jerkezian worked well.

@forrestab I have four multi select... how can I reset one by one?

@deejaygeekout you loop inside the "element" something like this maybe:

for( var i = 0 ; i < element.length() ; i++  )
{
   element[i].click();
}

As noted I don't recommend using this method.

@deejaygeekout, pretty much what @serge-jerkezian.

In order to get those elements I used,

angular.element(document.querySelectorAll('.multiSelect .reset'));

I agree with you @serge-jerkezian, but I could not find a better way to do it at the moment.

I am putting this here for anyone else that has an issue with v3 and resetting selected items from outside the directive.

So I had to come back to this after a long while because we ended up finding an issue with the click solution. I won't really get into the issue other than it did not always update the button label. Not really sure what the deal was there, but just like @serge-jerkezian suggested it was not a good solution to begin with.

Anyway, I went back to trying @isteven's suggestion and could not figure out why it wasn't working. Well it appears the tickProperty I specified is never updated on the inputModel object. It is only updated on the local localModel object. This means the inputModel is never changed and when I try to pass my fresh copy to the directive, it passes the objectEquality check and the $watch for inputModel never fires. So I ended up having to remove that 3rd parameter on $watch and @isteven's suggestion works just fine.