Question

我有三个npm install node-jose个框。我需要根据我的复选框选择（dropdown或single checkbox或two checkboxes）来过滤数据并显示在表格中。

我已完成以下操作，但如果我们清楚地看到它，我就无法使用three checkboxes正确过滤数据。

像：

一个。它适用于AngularJS：表示如果我从individual checkbox selection或single checkbox或Name中选择任何Description，则相应的匹配过滤数据应显示在表格，否则不应显示任何数据（即如果它与我们的复选框选择不匹配意味着它不会显示任何数据）

湾它适用于Field4：意味着如果我选择multiple(two) checkbox selection和one from Name one from Description or和one from Description {{1}这样的多个复选框} one from Field4和or，然后相应的匹配过滤数据应显示在表格中，否则不应显示任何数据（即，它是否与我们的复选框选择方式不匹配）它不会显示任何数据）

℃。它适用于one from Field4：意味着如果我选择one from Name和multiple(three) checkbox selection以及one from Name这三个复选框，则相应的匹配过滤数据应显示在表格中，否则不应该显示任何数据（即如果它与我们的复选框选择不匹配意味着它不会显示任何数据）

第一次one from Description选择工作正常，意味着：加载上述代码/应用后，如果我们one from Field4选择上述任何一个选项（例如是否{{1}选择或checkbox选择或check选择）然后它工作正常，以后它不起作用（意味着如果我们single checkbox上述任何标准然后我们选择任何two checkbox然后它再次无法正常工作，因为我们需要刷新应用/代码然后才能正常工作。

示例：如果我从Name中选择一个，则将显示相应的匹配数据。如果我three checkbox和uncheck来自checkbox之类的uncheck那么它又不起作用。同样适用于所有上述标准。你可以清楚地check。

请让我知道我在这里做错了，让我知道如何正确过滤它。创建了Fiddle。提前谢谢！

Answer 1

问题在于错综复杂的过滤逻辑。每当您发现自己嵌套了大量if语句时，请考虑重新组织分支逻辑。通过将其分解为更小的组件，您可以更容易管理，如果您可以完全避免使用if，那么您只需要测试一条路径，而不是几条路径。

每次用户选中一个复选框时，我们都需要确保只显示匹配的项目，但检查了多少个复选框。因此，我们需要知道1）检查了多少个框， n ，以及2）使用 n 匹配字段可以找到多少个项目。

我们可以利用布尔变量可以转换为整数（0 = false，true = 1）的事实，并使用它来计算复选框的数量，以及找到的匹配数。

我们也可以将字段名称放入数组中，这样我们的函数就不会有太多重复。

Fiddle example here

var fields = ["name", "description", "field4"];

//for each field, count how many fields the item matches
function getMatches(item, matchesNeeded) {
    var foundMatches = 0;
    fields.forEach(field => {
      foundMatches += item[field] === $scope.pagedItems[field]
    });

    //make sure found at least one match and found desired minimum
    return foundMatches && foundMatches >= matchesNeeded;
}

//count how many boxes are checked
//this will tell us how many different fields we are matching on
function numChecked() {
    var count = 0;
    fields.forEach(field => {
        //this will auto convert falsy to 0.
        //truthy values will be 1
        count += Boolean($scope.pagedItems[field]);
    });
    return count;
}

$scope.filterItems = function(item) {
    return getMatches(item, numChecked());
};

Answer 2

正如@Larry指出的那样，它更多地基于逻辑。我已经修改了Apress书＆＃39; Pro AngularJS＆＃39; Source Code from GIT为此。

基本逻辑将在过滤功能中如下 -

$scope.categoryFilterFn = function (product) {
    var canHave = false;//dont load by default
    var atLeastOneTrue = false;//Check if previously checked any condition
    angular.forEach(filterValues, function(selectedValue, key) {
        var selectVals = Object.values(selectedValue);
            if(selectVals.indexOf(product[key]) !== -1) {//if values exits in product.
                canHave = !atLeastOneTrue ? true : canHave;
            }else{
                canHave = false;
            }
            atLeastOneTrue = true;
    });
    return canHave;
}

working Fiddle。

如何使用AngularJS过滤JSON数据？

2 个答案: