javascript - 过滤掉 ng-repeater 中的重复项，但增加项目旁边的值

Question

我有一个过滤器，当前正在删除我拥有的 ng-repeater 中的重复项。我需要能够显示数组中值旁边的值。

例如如果我有一个数组 [ 'houston', 'houston', 'dallas' ]

页面上的值如下所示:休斯顿 (2)、达拉斯 (1)

我以为我有一个解决方案，但我收到了 Angular 错误，因为我返回的是一个数组而不是我拥有的原始项目。我基本上将 item 作为 [item, 1] 插入数组，其中 1 是它被看到的次数。我会创建 if 语句的 else 部分，在其中我会增加该金额，但不会执行。

需要一些关于如何使其发挥作用的想法。

这是我创建的过滤器

.filter('unique', function() {
  return function(collection, keyname) {
    var output = [], 
        keys = [];

    angular.forEach(collection, function(item) {
      var key = item[keyname];

      if(keys.indexOf(key) === -1) {
        keys.push(key);
        output.push(item);
      }
    });
    return output;
  };
});

这是带有我的过滤器的 ng-repeater。 (请注意，我在需要的项目数量处添加了 {{ value }})

<li ng-repeat="info in search.hits | unique: 'type'">
  <a>{{ info.type }} {{ value }}</a>
</li>

谢谢!

Answer 1

这很简单。

添加一个这样的计数器

.filter('unique', function() {
  return function(collection, keyname) {
    var output = [];
    angular.forEach(collection, function(item) {
      var obj = output.filter(function(x) {
        return x[keyname] == item[keyname];
      });
      if (obj.length > 0)
        obj.count += 1;
      else {
        item.count = 1;
        output.push(item);
      }
    });
    return output;
  };
});

查看:

<li ng-repeat="info in search.hits | unique: 'type'">
  <a>{{ info.type }} {{ info.count || 0 }}</a>
</li>