Javascript 使用angular.forEach函数筛选HTML表以替换许多if/else语句

在angularJS应用程序中有一个HTML表：

HTML:

<tr ng-repeat="player in playerdata | filter:tableFilter" >

这很好：当条件不满足时，它会根据需要将玩家从表中移除

然而，这里可能会出现这种模式，因为我有超过5个

stats

，所以我需要整理一下，以便重用。我失败的尝试：

function tableFilter (player) {
    var stats = [
        'GP','GA60','SA60','FA60','CA60' // etc
    ];
    angular.forEach(stats, function (stat) {
        var statMin = $scope[stat + 'Min'];
        var statMax = $scope[stat + 'Max'];
        var p = player[stat];

        if ( p < statMin || p > statMax ) { return false; };
    });

    return true;
};

功能表过滤器（播放器）{
变量统计=[
“GP”、“GA60”、“SA60”、“FA60”、“CA60”等
];
角度。forEach（stats，function（stat）{
var statMin=$scope[stat+'Min']；
var statMax=$scope[stat+'Max']；
var p=玩家[状态]；
如果（pstatMax）{返回false；}；
});
返回true；
};

这将运行，我可以

console.log

按预期显示结果，但HTML不会更新（或仅使用过滤后的值重新呈现）

---

我在这里遗漏了什么，如何让表使用第二个函数进行过滤

您的

返回false语句位于forEach函数中，而不是filter函数中。将其分配给过滤器函数的一个局部变量，然后返回最终结果。
您需要一种打破该循环的方法<
forEach
范围内的code>return false

不会从

filter

函数返回-因此每次

return false

在

forEach

内（此调用刚刚从循环中中断）时，您都会返回

true

。您可以在变量中设置所需的返回布尔值，并在找到时中断该循环-然后返回

var

。遵守以下（未经测试的）

function tableFilter (player) {
    var stats = [
        'GP','GA60','SA60','FA60','CA60' // etc
    ];

    var truthy = true;

    angular.forEach(stats, function (stat) {
        var statMin = $scope[stat + 'Min'];
        var statMax = $scope[stat + 'Max'];
        var p = player[stat];

        if(p < statMin || p > statMax) {
            truthy = false;  // -- store value to return from .filter
            return;          // -- return from forEach block
        }
    });

    return truthy;
};

功能表过滤器（播放器）{
变量统计=[
“GP”、“GA60”、“SA60”、“FA60”、“CA60”等
];
var truthy=真；
角度。forEach（stats，function（stat）{
var statMin=$scope[stat+'Min']；
var statMax=$scope[stat+'Max']；
var p=玩家[状态]；
如果（pstatMax）{
truthy=false；//--存储从.filter返回的值
return；//--从forEach块返回
}
});
回归真理；
};

您可以更改数据的形状，例如：

var filter = function(player) {
    //player = { GA: 12, GP: 15, ... }
    $scope.stats = { GA: { min: 10, max: 20 }, GP: { ... } ... }
    var show = true;
    angular.forEach($scope.stats, function(item, argname) {
        if(player[argname] < item.min || player[argname] > item.max) {
            show = false;
        }
    });
    return show;
}

var过滤器=函数（播放器）{
//玩家={GA:12，GP:15，…}
$scope.stats={GA:{min:10，max:20}，GP:{…}
var show=true；
angular.forEach（$scope.stats，函数（item，argname）{
如果（玩家[argname]item.max）{
show=false；
}
});
回归演出；
}

---

请注意，angular.forEach将枚举对象的属性。

根据您的示例，似乎缺少相应的属性。

var filter = function(player) {
    //player = { GA: 12, GP: 15, ... }
    $scope.stats = { GA: { min: 10, max: 20 }, GP: { ... } ... }
    var show = true;
    angular.forEach($scope.stats, function(item, argname) {
        if(player[argname] < item.min || player[argname] > item.max) {
            show = false;
        }
    });
    return show;
}