我以以下形式列出了不同团队的单场比赛结果:
[{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-repeat
和angular.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:
)中,但无济于事。
我是否有可能实现?
答案 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);
};