如何合并这些自定义过滤器？

Question

我试图使用此代码创建一个过滤器机制，该机制可以完美地（独立地）工作：

    // Report Filtering
$scope.filter = {};
$scope.getCategories = function () {
    return ($rootScope.reportsData || []).map(function (report) {
        return report.type;
    }).filter(function (report, idx, arr) {
        return arr.indexOf(report) === idx;
    });
};
$scope.getPackages = function () {
    return ($rootScope.reportsData || []).map(function (report) {
        return report.package;
    }).filter(function (report, idx, arr) {
        return arr.indexOf(report) === idx;
    });
};
$scope.filterByCategory = function (reportsData) {
    return $scope.filter[reportsData.type] || noFilter($scope.filter);
};
 $scope.filterByPackage = function (reportsData) {
    return $scope.filter[reportsData.package] || noFilter($scope.filter);
};
function noFilter(filterObj) {
    for (var key in filterObj) {
        if (filterObj[key]) {
            return false;
        }
    }
    return true;
}

ng-repeat是：

    ng-repeat="item in filtered=(reportsData | filter:filterByPackage)"

如果我将filter：替换为filterByPackage或filterByCategory，则此方法非常有效。

我使用以下代码来遍历键并创建复选框以切换项目的可见性：

<label ng-repeat="cat in getCategories()">
                <input type="checkbox" ng-model="filter[cat]" />{{cat}}</label>

但是，我想将两者结合使用。 如果我将ng-repeat上的内联代码修改为：

ng-repeat="item in filtered=(reportsData | filter:filterByPackage | filter:filterByCategory)"

然后单击复选框会使整个列表消失。 正确组合这两个过滤器的语法是什么？

Answer 1

如果选择一个类别和一个程序包，则只想显示与两者都匹配的reportData？

您遇到的问题是，同时将“过滤器”对象用于两种类型的过滤，并且将其与noFilter函数结合使用，该函数还可以验证是否在过滤器上进行了检查，从而导致您需要选择包和类别与要显示的reportData完全匹配（您不能不选择过滤器，也不显示任何过滤器）。

您可以做的是将过滤器初始化为每个条件均是成员的对象，并按以下方式利用它们：

$scope.filter = { packages: {}, categories: {}};

return $scope.filter.categories[reportsData.type] || noFilter($scope.filter.categories);

<label ng-repeat="cat in getCategories()">
    <input type="checkbox" ng-model="filter.categories[cat]" />{{cat}}
</label>