使用 angular ng-repeat 计算键值

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

像这样在 html 标签中嵌套 ng-repeat 标签，

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

Answer 2

您需要创建自己的过滤器。需要在下面的过滤器上做一些工作才能添加相同 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。

Answer 3

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

我正在使用 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>

使用 angular ng-repeat 计算键值

count key value with angular ng-repeat

angularjs

ng-repeat