在angularjs中执行Group By和Sum by属性

Question

好吧，有一个简单的页面可以显示使用中的对象集合。ng-repeat="(key, value) in data| groupBy: 'Id'"我想按已知属性对数据进行分组，并且还要对其中一个字段进行汇总。我使用了angular-filter.js利用groupBy过滤器来简化此过程的库。现在的问题是，我还要执行汇总总和，并且每个组也只显示一行。所以说我有一系列对象，

`[{Id:1,name:"harry",volume:500},
{Id:1,name:"harry",volume:200},
{Id:2,name:"Fred",volume:150},
{Id:2,name:"Fred",volume:500},
{Id:3,name:"Sally",volume:450},
{Id:3,name:"Sally",volume:100}
]`

如上所示，唯一ID的体积不同。在按ID分组并汇总volume（sum）之后，我想在下面返回此代码。

`[{Id:1,name:"harry",volume:700},
{Id:1,name:"Fred",volume:650},
{Id:1,name:"Sally",volume:550}
]`

编辑 我想视情况在2个显示之间切换，即（所有行）和（分组行）。我已经通过使用ng-show复选框标记来确定要显示的视图来实现这一点。我想这样做而不必像在此所做的那样写额外的标记MyPlunkr SAMPLE
这种方式是我的首选方式，但是有一个无需写额外的标记就可以做到这一点。也许自定义过滤器就足够了？

Answer 1

您在每次迭代中都有分组的对象，因此查找总和非常容易：

$scope.getVolumeSum = function(items) {
    return items
        .map(function(x) { return x.volume; })
        .reduce(function(a, b) { return a + b; });
};

和

<div ng-repeat="(key, items) in data | groupBy: 'Id'">
  id: {{ key }}, name: {{ items[0].name }}, volume: {{ getVolumeSum(items) }}
</div>

JSFIDDLE样本