Question

我有一系列项目，我正在重复使用ng-repeat并使用组过滤器

这是我的数组

var items = [
   { product_id : 1, quantity : 2 }
   { product_id : 1, quantity : 3 }
   { product_id : 2, quantity : 2 }
   { product_id : 3, quantity : 4 }
   { product_id : 2, quantity : 8 }
];

我想要一个ng-repeat导致以下演示文稿

| product_id 1 | quantity 5 |
| product_id 2 | quantity 10 |
| product_id 3 | quantity 4 |

有什么建议吗？

Answer 1

虽然这是一个老问题，但我发现我可以更清楚地回答这个问题。

我正在使用angular-filter模块来获取groupBy过滤器。

angular.module('app', ['angular.filter']).
controller('ctrl', function($scope) {
  $scope.data = [
    { product_id : 1, quantity : 2 },
    { product_id : 1, quantity : 3 },
    { product_id : 2, quantity : 2 },
    { product_id : 3, quantity : 4 },
    { product_id : 2, quantity : 8 }
  ];
}).
filter('total', function() {
  return function(arr, prop) {
    return arr.reduce(function(previousValue, currentObj) {
      return previousValue + currentObj[prop];
    }, 0);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>

<div data-ng-app="app" data-ng-controller="ctrl">
  <div data-ng-repeat="(key, value) in data | groupBy : 'product_id'">
    | product_id {{key}} | quantity {{value | total: 'quantity'}}
  </div>
</div>

更新

有一种更好的方法来计算每个组的总和，再次感谢angular-filter（和@toddbranch）。要计算总数，您可以使用map和sum过滤器。像这样：

{{value | map: 'quantity' | sum}}

完整的演示：

angular.module('app', ['angular.filter']).
controller('ctrl', function($scope) {
  $scope.data = [
    { product_id : 1, quantity : 2 },
    { product_id : 1, quantity : 3 },
    { product_id : 2, quantity : 2 },
    { product_id : 3, quantity : 4 },
    { product_id : 2, quantity : 8 }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>

<div data-ng-app="app" data-ng-controller="ctrl">
  <div data-ng-repeat="(key, value) in data | groupBy : 'product_id'">
    | product_id {{key}} | quantity {{value | map: 'quantity' | sum}}
  </div>
</div>

Answer 2

尝试在ngtml标签中嵌套ng-repeat标签，如此，

<div ng-repeat 1>
  <div ng-repeat 2>
    <!-- where you need the data -->
  </div>
</div>

Answer 3

您需要创建自己的过滤器。需要在下面的过滤器上进行一些工作，以便使用相同的product_id添加数量。

<强>标记

<div ng-repeat="i in items | orderBy: 'product_id' |groupBy:'product_id':'quantity'">
   {{i.product_id}}| {{i.quantity}}
</div>

过滤

app.filter('groupBy', function() { return function(values, property1, property2) { var groupByArray = []; console.log("Initialize"); angular.forEach(values, function(value, index) { var lengthOfGroupBy = groupByArray.length; if (lengthOfGroupBy == 0 || groupByArray[lengthOfGroupBy - 1][property1] != value[property1]) { groupByArray.push(value); } }); return groupByArray; } });

Working Fiddlle

<强>更新

我进一步尝试并成功实现了你想要的东西，它可以工作，但是在控制台中有错误说"Error: 10 $digest() iterations reached. Aborting!”

这是我的Updated Fiddle在控制台中出错。

我发现solution on SO适用于同一问题。

使用角度ng-repeat计算键值

3 个答案: