在 angularjs 中按属性执行分组和求和

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 分组并聚合卷（总和）后，我想 return 下面这个。

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

编辑我想根据情况在 2 个显示之间切换，即（所有行）和（分组行）。我已经通过使用 ng-show 和复选框标志来确定 display.I 想要执行此操作的哪个视图来实现这一点，而不必像我在这里所做的那样编写额外的标记 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 SAMPLE

Answer 2

我已经能够解决这个问题，即将数据分组并聚合它，以便它显示在同一视图上，而无需创建单独的视图。我实现了自定义过滤器。

angular.module('myApp',[])
.controller('Ctrl',[function($scope){
$scope.originalist = []// data is an array of objects.
    $scope.groupdata = function(showlist){
            $scope.newlist = showlist ? $filter('myCustomFilter')($scope.originalist): $scope.originalist; 
     }

}])
.filter('myCustomFilter',function(){
     return function(input){
     //Group the input data and aggregate where necessary
      return data
}

});

然后在 html 文档中：

<input type="checkbox" ng-model="showlist" ng-change="groupdata (showlist)" />

也在视图中：

  <tr class="ng-cloak" ng-repeat="d in originalist>
  </tr>

所以我在复选框值 showlist 设置为 true 时调用过滤器。也许有更好的方法，但这对我有用。

在 angularjs 中按属性执行分组和求和

Perform Group By and Sum by property in angularjs

angularjs

angularjs-directive

angular-filters

在 angularjs 中按 属性 执行分组和求和

Perform Group By and Sum by property in angularjs

angularjs

angularjs-directive

angular-filters

在 angularjs 中按属性执行分组和求和