ngRepeat内部的自定义过滤器，用于相对于模型的price属性过滤div

Question

Trying to use angular custom filter to filter my products by price using Checkboxes, but need better implementation of my custom filter function so that all cases work as expected.

HTML html with checkboxes for filtering

<input id="cb1" type="checkbox" ng-model="priceVal1">
<label for="cb1"><span></span>Under 200</label>

<input id="cb2" type="checkbox" ng-model="priceVal2">
<label for="cb2"><span></span>200 - 400</label>

<input id="cb3" type="checkbox" ng-model="priceVal3">
<label for="cb3"><span></span>400 - 600</label>

<input id="cb4" type="checkbox" ng-model="priceVal4">
<label for="cb4"><span></span>600 - 800</label>

<input id="cb5" type="checkbox" ng-model="priceVal5">
<label for="cb5"><span></span>800 - 1000</label>

<input id="cb6" type="checkbox" ng-model="priceVal6">
<label for="cb6"><span></span>Above 1000</label>

HTML TABLE

<div ng-repeat="product in appData.products | filter:priceFilterCustom('price', priceVal1, priceVal2, priceVal3, priceVal4, priceVal5, priceVal6)"></div>

In controller custom filter function right now is this:

$scope.priceFilterCustom = function (priceField, val1, val2, val3, val4, val5, val6) {
            return function predicateFunc(item) {
                    if(val1 == true){
                        return 0 < item[priceField] && item[priceField] <= 200
                    }
                    if(val2 == true){
                        return 200 <= item[priceField] && item[priceField] <= 400
                    }
                    if(val3 == true){
                        return 400 < item[priceField] && item[priceField] <= 600
                    }
                    if(val4 == true){
                        return 600 < item[priceField] && item[priceField] <= 800
                    }
                    if(val5 == true){
                        return 800 < item[priceField] && item[priceField] <= 1000
                    }
                    if(val6 == true){
                        return item[priceField] >= 1000
                    }
            };
        };

So the function takes 7 parameters the first is the property we want to filter in my case it will be always 'price' since I want to use this filter only for price filter so in my html i pass it hardcoded as 'price' the other parameters are true/false/undefined This works but If i want to click two checkboxes for example first and second the function takes

'price' true true false false false false as parameters and the custom filter does not continue to the second if since the first if is true and returns true

So I'm thinking of a better way for this solution

Answer 1

just use or

var res = false;
if(val1 == true){
    res = res || (0 < item[priceField] && item[priceField] <= 200)
}
if(....
return res;