angularjsのグループ化と合計でプロパティを実行

Question

これでオブジェクトのコレクションを表示する単純なページが表示されますng-repeat="(key, value) in data| groupBy: 'Id'"既知のプロパティでデータをグループ化し、いずれかのフィールドで集計を実行したいと思います。 私はこれを容易にするためにgroupByフィルタを利用してangular-filter.jsライブラリを使用しました。 問題は、集計合計を実行し、グループごとに1つの行だけを表示したいということです。つまり、オブジェクトの配列があるとします。

`[{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と集約ボリューム（合計）でグループ化した後、これを下に戻したいと思います。私は場合によっては2つのディスプレイすなわち（全行）と（グループ化された行）を切り替えたい

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

EDIT 。私は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 SAMPLE

Answer 2

私は回避することができましたこれはつまり、データをグループ化し、それを集約して、別々のoを作成せずに同じビューに表示するようにします。 ne。 Iカスタムフィルタを実装しました。

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に設定されているときにフィルタを呼び出します。 おそらくもっと良い方法がありますが、これが私のために働いています。