如何使用AngularJS过滤JSON数据？

Question

我有三个dropdown盒子。我需要过滤数据，并根据我的复选框选择（需要使用single checkbox或two checkboxes或three checkboxes）显示在表格中。

我已经做了以下，但如果我们清楚地观察它，我不能够使用AngularJS正确地过滤数据。

赞：

a。它应该为individual checkbox selection工作：是指如果我选择任何single checkbox无论是从Name或Description或Field4，那么相应的匹配滤波的数据应显示在表中，否则它不应该显示任何数据（即如果它不符合我们的复选框选择意味着它不会显示任何数据）

b。它应为multiple(two) checkbox selection工作：一装置，如果我选择任何多个复选框等任一one from Nameone from Description和orone from Description和one from Field4orone from Field4和one from Name，然后各自匹配滤波的数据应被显示在表中，否则不应该显示任何数据（即如果它不符合我们的复选框选择意味着它不会显示任何数据）

c。它应该multiple(three) checkbox selection工作：也就是说，如果我选择了三个复选框像one from Name和one from Description和one from Field4，那么相应的匹配滤波的数据应显示在表中，否则它不应该显示任何数据（即如果它不符合我们的复选框的选择意味着它不会显示任何数据）

据首次仅checkbox选择工作正常，是指：装载上述代码/应用程序，之后如果我们check上述任一选择中的任何一个（例如是否single checkbox选择或two checkbox选择或three checkbox选择），那么它的正常工作，以后它不工作（也就是说，如果我们uncheck上述任何条件，然后，如果我们选择任何checkbox再次它不工作，为此，我们需要刷新应用程序/代码，然后只有它的工作）。

示例：如果我从名称中选择一个，则会显示各自匹配的数据。然后再次，如果我uncheck相同和checksome other checkbox像Description那么它不起作用。同样适用于所有上述标准。清楚你可以observe。

请让我知道我在这里做错了什么，让我知道如何正确地过滤它。创建了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的书'Pro AngularJS'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。