I am trying to implement multiple checkbox based filters and wondering if there is a better way to do so (something that wouldn't upset John Papa).
If I am working with Sodas and I want to filter by brand as a starting point I have this set up:
<input type="checkbox" ng-model="vm.brands.Pepsi"> Pepsi
<input type="checkbox" ng-model="vm.brands.Coke"> Coke
<ul>
<li ng-repeat="soda in vm.sodas | filter:vm.brandFilter">
{{soda.name}}
</li>
</ul>
with my filter function being:
function brandFilter(soda) {
if (!vm.brands) {
return soda;
}
var brand = soda.brand;
if (vm.brands[brand] === true) {
return soda;
} else {
return false;
}
}
While this works I am hoping that there is a better/more production viable solution that can maintain DRYness considering I will be adding multiple 'groups' of checkboxes (if it were soda perhaps more object properties would be color, flavor, etc).