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

Question

尝试使用“角度自定义过滤器”通过“复选框”按价格过滤我的产品，但需要更好地实现我的“自定义过滤器”功能，以便所有情况都能按预期工作。

HTML带有复选框的HTML用于过滤

<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表格

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

现在在控制器自定义过滤器功能中是这样的：

$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
                    }
            };
        };

所以该函数需要7个参数，第一个是我们要过滤的属性，在我的情况下，它将始终是“ price”，因为我只想将此过滤器用于price过滤器，因此在我的html中，我将其硬编码为“ price”，另一个参数为true / false / undefined可以，但是如果我要单击两个复选框，例如第一个和第二个，则该函数需要

'price' true true false false false false作为参数，并且自定义过滤器不会继续到second if因为第first if为true并returns true

所以我正在考虑一种更好的解决方案

Answer 1

只需使用或

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