AngularJS:按分组列表的总和排序

时间:2018-11-15 00:14:34

标签: javascript angularjs angular-filters

我以以下形式列出了不同团队的单场比赛结果:

    [{team: "A", w: 1, l: 0, t: 0, date: '2018-10-01'},
     {team: "B", w: 1, l: 0, t: 0, date: '2018-10-01'},
     {team: "C", w: 0, l: 1, t: 0, date: '2018-10-01'},
     {team: "D", w: 0, l: 1, t: 0, date: '2018-10-01'},
     {team: "A", w: 1, l: 0, t: 0, date: '2018-10-08'},
     {team: "B", w: 0, l: 1, t: 0, date: '2018-10-08'},
     {team: "C", w: 0, l: 0, t: 1, date: '2018-10-08'},
     {team: "D", w: 0, l: 0, t: 1, date: '2018-10-08'},
     {team: "A", w: 1, l: 0, t: 0, date: '2018-10-15'},
     {team: "D", w: 0, l: 0, t: 0, date: '2018-10-15'},
     {team: "B", w: 1, l: 0, t: 0, date: '2018-10-15'},
     {team: "B", w: 1, l: 0, t: 0, date: '2018-10-17'},
     {team: "B", w: 1, l: 0, t: 0, date: '2018-10-20'},
     {team: "C", w: 0, l: 1, t: 0, date: '2018-10-20'},
     {team: "C", w: 0, l: 1, t: 0, date: '2018-10-22'}]

现在可以使用ng-repeatangular.filter在按团队分组的表中显示该数据。使用this suggestion,我还可以汇总游戏结果以为每个团队创造一个记录:

Rank    Team    Games   Wins    Losses  Ties
1       A       3       3       0       0
2       D       3       0       1       1
3       C       4       0       3       1
4       B       5       4       1       0

Here is a jsfiddle是我到目前为止所得到的。

此外,我在视图中放置了一个datepicker,用户可以从中选择日期范围。更改这些日期后,汇总将更新。这也已经在工作。

我现在的问题是,我无法按显示的任何类别对表进行排序。我尝试了其他事情,例如使用任何可以想象的orderBy:子句。我还尝试将聚合结果放入要在{{ wins = reduce(group, 'w') }}中引用的变量(如orderBy:)中,但无济于事。

我是否有可能实现?

1 个答案:

答案 0 :(得分:1)

一种解决方案是利用您可以将函数作为表达式参数传递给orderBy的事实。在此函数内,您可以为每个属性计算一组中所有项目的总和,然后将结果用作要排序的值。

对HTML的调整:

ng-repeat="group in data | groupBy: 'team' | toArray:true | orderBy:category"

以及实现它的相关JS:

// $scope.order is a user option to specify the property to order by
$scope.category = function (value) {
    // The games column is not a data item property so it is treated specially
    if ($scope.order === 'games') {
        return value.length;
    }
    return value.reduce(function (total, dataItem) {
        return total + dataItem[$scope.order];
    }, 0);
};

And here's forked JSFiddle demonstrating the suggestion.