每组50场比赛的GroupBy | AngularJs

Question

我有一个对象数组(500个对象)，并想GroupBy它50个游戏每组(10组)。

现在的数据是：

var data = [
  { name : "Starburst",
    id : 2614
  },
  { name : "Pipono",
    id : 4587
  },
  { name : "New Bail",
    id : 7827
  } 
  ...
]

HTML

 <div ng-repeat="(key, value) in data| groupBy: 'id'"> ... </div>

现在我按id对其进行分组，但找不到解决方案。

我知道有一种方法可以使用“groupBy”循环(每隔50个元素添加0-50,51-100……的值，然后对该值进行求值)，但这不是最好也不是最快的方法。

我怎么才能意识到这一点呢？提前谢谢。

Answer 1

您可以通过lodash使用_.sortBy和_.chunk。传递要组合在一起的项的数量，

$scope.itemschunk = _.chunk($scope.itemssorted, 50);     

演示

​

var app = angular.module('anExample', []);

app.controller('theController', ['$scope',function($scope){
	$scope.test = 'this is a test';
  
  $scope.items = [
    { name:"A",  id: 30}, 
    { name:"B",  id: 20 },
    { name:"C",  id: 200 }, 
    { name:"D",  id: 20 },
    { name:"E",   id: 100 }, 
   
	];
  
  $scope.itemssorted = _.sortBy($scope.items, 'id');
  $scope.itemschunk = _.chunk($scope.itemssorted, 2);     
 
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.4.0/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="anExample" ng-controller="theController">

    Hello, {{test}}!
    <ul ng-repeat="group in itemschunk">
      <li ng-repeat="items in group"> name: {{items.name}}, id: {{items.id}} </li>
    </ul>

</div>

​