Question

我正在尝试将类似的元素分组并添加到我在ng-repeat中显示的数组中。

我尝试将过滤器应用为：

<div ng-repeat="shape in shapes|filter:groupFilter">
  {{shape.name}}- {{shape.value}}
</div>

$scope.groupFilter=function(item)=>{
return item.name===item.name;
}

我无法一次访问整个元素，因此我可以比较这些值并将它们相加。我期待的最终结果就是这样......

圈子 - 17 矩形-13

Answer 1

修改

更新了plunkr - http://jsfiddle.net/2s9ogyh8/1/

再次阅读这个问题后，我意识到你不仅试图在视觉上进行分组，而且还想要聚合值。如果您只是尝试对现有值进行分组，那么您将使用我原来的答案。

由于您要汇总总数，我建议在用户界面呈现之前这样做，否则您会遇到来自@ toskv答案的$ digest循环问题。他的聚合逻辑几乎是一样的。

结束编辑

以下是有关此主题的相关帖子 - orderBy multiple fields in Angular

查看内置的orderBy过滤器 - https://docs.angularjs.org/api/ng/filter/orderBy

如果您正在寻找的不仅仅是根据shpae的名称/类型进行排序，那么您很可能无法通过声明性对象匹配器执行此操作，但您可以通过{{1功能回到它。

更新了plunker - http://jsfiddle.net/d13zmk3y/2/

Answer 2

一种简单的方法是使用reduce来对所有内容进行分组。

app.filter('group', function() {
  return function(items) {
    return items.reduce(function(aux, current) {
      if (aux[current.name]) {
        aux[current.name].count += parseInt(current.value, 10);
      } else {
        aux[current.name] = {
          name: current.name,
          count: parseInt(current.value, 10)
        };
      }
      return aux;
    }, {});
  };
});

您可以看到一个完整的示例here。

使用filter-Angularjs对相似元素进行分组

2 个答案:

修改

结束编辑