使用angular.forEach函数过滤HTML表以替换许多if/else语句

Filter HTML table with function using angular.forEach to replace many if/else statements

本文关键字：许多 替换 if 语句 else forEach angular 函数 过滤 HTML 使用      更新时间：2023-09-26

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

HTML:

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

有一个名为tableFilter的函数，看起来是这样的：

function tableFilter (player) {
    if ( player.GP      <   $scope.GPMin    ||  player.GP   >   $scope.GPMax)   { return false; };
    if ( player.GA60    <   $scope.GA60Min  ||  player.GA60 >   $scope.GA60Max) { return false; };
    if ( player.SA60    <   $scope.SA60Min  ||  player.SA60 >   $scope.SA60Max) { return false; };
    if ( player.FA60    <   $scope.FA60Min  ||  player.FA60 >   $scope.FA60Max) { return false; };
    if ( player.CA60    <   $scope.CA60Min  ||  player.CA60 >   $scope.CA60Max) { return false; };
    return true;
};

这很好：当条件不满足时，它会根据需要将球员从积分榜上除名。

然而，可能会看到这里出现的模式，并且由于我有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;
};

这将运行，我可以按预期console.log结果，但HTML不会更新（或仅使用过滤后的值重新呈现）。

我在这里缺少了什么，如何使用第二个函数来过滤表？

您需要一种方法来打破这个循环。forEach作用域中的return false不会从filter函数返回，因此每次在forEach中return false时都会返回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;
};

您的return false;语句在forEach函数中，而不是在filter函数中。将其分配给筛选函数的局部变量，然后返回最终结果。

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

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

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

相关文章：