angularjs의 그룹 By 및 Sum by 속성을 사용하십시오.

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} 
]` 

I는 경우에 따라 2 개 즉 디스플레이 (모든 행) 및 (그룹화 행) 사이에서 전환하려는 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를 만들 필요없이 동일한보기에 표시되도록합니다. 네. I 사용자 지정 필터를 구현했습니다. 보기에도

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

---

: 체크 박스 값 showlist이 true로 설정되어있는 경우

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

그래서 나는 필터를 호출하는 HTML 문서에서 다음

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 
} 

}); 

. 아마 더 좋은 방법이 있지만 이것은 나를 위해 일한 것입니다.