GroupBy每50場比賽| AngularJs

我有一個對象數組（500個對象），並希望GroupBy每組50個遊戲（10組）。GroupBy每50場比賽| AngularJs

現在數據是：

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，並不能找到做這件事的解決方案。

我知道有一種方法可以通過「for」循環來實現（爲每個第50個元素添加值0-50,51-100 ...和groupBy該值），但這不是最好和最快的方法。

我怎麼能意識到這一點？在此先感謝。

來源

2017-09-11 Arik Donowan

使用'排序依據： 'id''，而不是'GROUPBY：' id''是不是你想要的？ – JeanJacques

@JeanJacques好的，但是我怎麼可以用orderBy創建組？ –

嗡嗡聲，我認爲'orderBy'不可能，我想你只是想通過id對它們進行排序。但是可以肯定的是，你想要將它們分成50組，或者如果你想通過** id **分組它們呢？因爲如果你想通過id對他們進行分組，我認爲[這個jsfiddle]（https://jsfiddle.net/plantface/L6cQN/）正在做你想做的事，不是嗎？否則，你可以看看[這個模塊]（https://github.com/a8m/angular-filter#groupby） – JeanJacques

您可以使用_.sortBy和_.chunk使用lodash。通過組合在一起的項目數，

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

DEMO

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

 
app.controller('theController', ['$scope',function($scope){ 
 
\t $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 }, 
 
    
 
\t ]; 
 
    
 
    $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>

來源

2017-09-11 13:27:42 Sajeetharan

Sajeetharan謝謝你的回答，但我們不使用lodash來完成這個項目。 –

然後你需要使用JavaScript來分組它將工作的項目 – Sajeetharan

GroupBy每50場比賽| AngularJs

回答

相關問題