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)"

如果我用filterByPackage或filterByCategory替换filter：这非常有效。

我使用此代码迭代键并创建复选框以切换项目的可见性：

<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？

您遇到的问题是您正在使用＆＃34;过滤器＆＃34;两种类型的过滤对象，以及与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>

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

1 个答案: