0

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

我已经完成了以下操作，但是如果我们清楚地观察它，我无法正确使用AngularJS.

喜欢：

一个。它应该适用于individual checkbox selection: 表示如果我single checkbox从Name或Description或中选择任何一个Field4，则相应的匹配过滤数据应显示在表中，否则不应显示任何数据（即，如果它与我们的复选框选择不匹配，则表示它将'不显示任何数据）

湾。它应该适用于multiple(two) checkbox selection：意味着如果我选择任何多个复选框，例如one from Nameandone from Description or one from Description和one from Field4 or one from Field4and one from Name，则相应的匹配过滤数据应显示在表中，否则不应显示任何数据（即，如果它与我们的复选框选择不匹配表示它不会显示任何数据）

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

它仅在第一次checkbox选择时工作正常，意味着：在加载上述代码/应用程序后，如果我们 check上述任何一个选择（如single checkbox选择或two checkbox选择或three checkbox选择）然后它工作正常，后来它不工作（意味着如果我们uncheck符合上述任何标准，然后如果我们checkbox再次选择任何标准，那么它就不起作用，为此我们需要再次刷新应用程序/代码，然后只有它才能工作）。

示例：如果我从名称中选择一个，则将显示相应的匹配数据。然后再一次，如果我从那时起uncheck同样如此，它就不起作用了。对于上述所有标准也是如此。你可以清楚的。checksome other checkboxDescriptionobserve

请让我知道我在这里做错了什么，并让我知道如何正确过滤它。创建了小提琴。提前致谢 ！

4

2 回答 2

2

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

每次用户选中一个框时，我们需要确保只显示匹配的项目，无论选中了多少个框。所以我们需要知道 1) 选中了多少个框，n，以及 2) 可以找到多少带有n 个匹配字段的项目。

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

我们还可以将字段名称放入一个数组中，这样我们的函数中就不会出现很多重复。

小提琴示例在这里。

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());
};
于 2016-11-08T15:33:05.493 回答
1

正如@Larry 指出的那样，它更多地基于逻辑。为此，我已经从 GIT修改了 Apress 书籍“Pro AngularJS”源代码。

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

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

对于工作小提琴。

于 2016-11-08T18:25:43.830 回答