angularjs - 在angularjs中按属性执行Group By和Sum

Question

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

`[{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 分组并聚合卷(总和)后将其返回。

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

编辑 我想根据情况在 2 个显示之间切换，即(所有行)和(分组行)。我通过使用带有复选框标志的 ng-show 来确定要显示哪个 View 来实现这一点。我想这样做而不必像我在这里所做的那样编写额外的标记 MyPlunkr SAMPLE < br/> 这种方式是我的首选方式，但需要在不编写太多额外标记的情况下执行此操作。也许自定义过滤器就足够了？

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 SAMPLE