在ng-repeat中显示具有重复出现次数的唯一项目

Question

我有一个以下JSON：

[{"brand":"abc"},{"brand":"xyz"},{"brand":"abc"},{"brand":"abc"},{"brand":"por"},{"brand":"xyz"}]

使用ng-repeat，如何显示 -

Brand Occurances
abc      (3)
xyz      (2)
por      (1)

即。品牌名称（同一品牌名称的重复次数）？

Answer 1

您可以创建一个自定义函数，该函数将使用repeatvie值（出现次数）从现有数组返回计数

与过滤器一起显示JSON中的唯一值：

$scope.getCount = function(i) {
    var iCount = iCount || 0;
    for (var j = 0; j < $scope.brands.length; j++) {
      if ($scope.brands[j].brand == i) {
        iCount++;
      }
    }
    return iCount;
  }

AND过滤器将如下所示：

app.filter('unique', function() {

  return function (arr, field) {
    var o = {}, i, l = arr.length, r = [];
    for(i=0; i<l;i+=1) {
      o[arr[i][field]] = arr[i];
    }
    for(i in o) {
      r.push(o[i]);
    }
    return r;
  };
})

Working Plunkr

Answer 2

要从数组中获取唯一项，您可以编写自定义过滤器，在AngularJS过滤器中用于修改要显示给用户的数据，并且为了从数组中获取重复项的计数，您可以编写在控制器的作用域上运行并在视图中调用它。

检查以下代码段，了解如何实现它。

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController)
  .filter('unique', unique);
  
  function DefaultController() {
    var vm = this;
    vm.items = [
    {
      "brand":"abc"
    },
    {
    	"brand":"xyz"
    },
    {
    	"brand":"abc"
    },
    {
    	"brand":"abc"
    },
    {
    	"brand":"por"
    },
    {
    	"brand":"xyz"
    }
    ];
    
    vm.getBrandCount = getBrandCount;
    
    function getBrandCount(brand) {
      var count = 0;
      if (brand !== undefined && brand !== null && brand.length > 0) {
      	for (var i = 0; i < vm.items.length; i++) {
          if (vm.items[i].brand === brand) {
            count++;
          }
        }
      }
      
      return count;
    }
  }
  
  function unique() {
    return function(array, key) {
      if (angular.isArray(array) && array.length > 0 && key !== undefined && key !== null && key.length > 0) {
        var arr = [], keys = [];
      	for (var i = 0; i < array.length; i++) {
          if (keys.indexOf(array[i][key]) === -1) {
            keys.push(array[i][key]);
            arr.push(array[i]);
          }
        }
        
        return arr;
      }
      
      return array;
    }
  }
  

.brandcount:before {
  content: '('
}

.brandcount:after {
  content: ')'
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <table>
      <thead>
        <tr>
          <th>Brand</th>
          <th>Occurances</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in ctrl.items | unique: 'brand'">
          <td>
            <span ng-bind="item.brand"></span>
          </td>
          <td>
            <span class="brandcount" ng-bind="ctrl.getBrandCount(item.brand)"></span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 3

在传递给ng-repeat之前，您需要先处理数据：

var app = angular.module("sa", []);

app.controller("FooController", function($scope) {

  var data = [{
    "brand": "abc"
  }, {
    "brand": "xyz"
  }, {
    "brand": "abc"
  }, {
    "brand": "abc"
  }, {
    "brand": "por"
  }, {
    "brand": "xyz"
  }];

  $scope.processedData = [];

  // Group the raw data based on the brand name and store the count
  function groupData() {

    angular.forEach(data, function(item) {
      // Check https://github.com/sagrawal14/angular-extras/blob/master/src/extras/array.js for this utility "find" method
      var existingBrand = $scope.processedData.find("brand", item.brand);

      if (!existingBrand) {
        existingBrand = item;
        existingBrand.count = 0;
        $scope.processedData.push(existingBrand);
      }

      existingBrand.count++;
    });
  }

  groupData();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script src="https://rawgit.com/sagrawal14/angular-extras/master/src/extras/array.js"></script>

<div ng-app="sa" ng-controller="FooController">
  <table>
    <tr ng-repeat="data in processedData">
      <td>{{data.brand}}</td>
      <td>{{data.count}}</td>
    </tr>
  </table>

  <br><br>Processed/grouped data: {{processedData | json}}
</div>