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:1,name:"harry",volume:700},
{Id:1,name:"Fred",volume:650},
{Id:1,name:"Sally",volume:550}
]`

修改我想根据具体情况在2个显示器（即所有行）和（分组行）之间切换。我已经通过使用带有复选框标记的ng-show来确定要显示哪个视图来实现这一点。我想这样做，而不必像我在这里所做的那样写额外的标记{ {3}}
这种方式是我的首选方式，但有必要这样做而不需要写更多的标记。也许自定义过滤器就足够了？

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中执行Group By和Sum by属性

2 个答案: