ng-show working with multiple filters in ng-repeat

I have an ng-repeat list with multiple filters, but as I need the elements to be hidden and not removed from the DOM, I use ng-show for the filtering.

This is how my first filter look like:

<a href="" ng-click="myFilter = ''; toggle = toggle=0; togglesec=0; mySecondFilter = {}" ng-class="{'active' : toggle==0}" >
   Tot
</a>

<a href="" ng-click="myFilter = 'pa'; toggle = toggle=1;  togglesec=0;  mySecondFilter = {}" ng-class="{'active' : toggle==1}">
   Pa
</a>

<a href="" ng-click="myFilter = 'Reposteria'; toggle = toggle=2; togglesec=0; mySecondFilter = {}" ng-class="{'active' : toggle==2}">
   Reposteria
</a>

And the second one:

<div ng-init="togglesec=0; mySecondFilter = {}">
   <a ng-click="mySecondFilter = {}; togglesec = togglesec=0" ng-class="{'active' : togglesec==0}">
       All
   </a>
   <a ng-click="mySecondFilter = {'vegan': true}; togglesec = togglesec=1" ng-class="{'active' : togglesec==1}">
       Vegan
   </a>
   <a ng-click="mySecondFilter = {'gluten': true}; togglesec = togglesec=2" ng-class="{'active' : togglesec==2}">
       Gluten Free
   </a>
</div>

Now, I was able to filter the ng-repeat using ng-show and the first filter like so:

<div ng-repeat="pa in products" ng-show="pa.tipus.indexOf(myFilter) != -1">

Basically it compares the value of myFilter with the pa.tipus object property, and it works OK.

But it won’t work with the second filter, because mySecondFilter is an object, not a string (it needs to filter the results containing vegan:true or gluten:true)

Here’s an example of my object type:

pa {
    tipus : 'pa',
    gluten : false,
    vegan : true
}

Any tips on how to combine both filters in the same ng-show?

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/09/29/ng-show-working-with-multiple-filters-in-ng-repeat/
via @lzomedia #developer #freelance #web #lzomedia.com