使用角度 ng-repeat 计算键值答案

【问题标题】：count key value with angular ng-repeat使用角度 ng-repeat 计算键值
【发布时间】：2015-02-14 04:29:52
【问题描述】：

我有一组使用 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 |

有什么建议吗？

【问题讨论】：

为什么不使用 lodash 之类的东西来预处理/分组数据？

标签： angularjs ng-repeat

【解决方案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>

【讨论】：

我还有另一个 angularjs 问题。你愿意对此发表评论吗？发布答案的用户没有详细说明就离开了。这是链接：stackoverflow.com/questions/35588344/…
我很乐意提供帮助，但我不明白。你得到了答案并且你接受了，对吧？你能具体说明缺少什么吗？
非常感谢您回复我。你愿意帮助这里的人是非常有价值的。实际上，在我与您联系到您下次登录之间，我收到了一个答复。这解释了这种困惑。

【解决方案2】：

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

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

【讨论】：

【解决方案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 可以解决同样的问题。

【讨论】：

最初lengthOfGroupBy为0，所以if语句的结果总是假的..
@UlukBiy 那是我的错。谢谢提醒..我粘贴了错误的代码（我试图添加数量的那个）。
@rslhdyt 对您有帮助吗？