如何使用角度過濾器對元素進行分組？

Question

我面臨的問題，在分組相同ID的元素

<ul ng-repeat="(key, value) in players | groupBy: 'team'"> 
    Group name: {{ key }} 
<li ng-repeat="player in value"> 
    player: {{ player.name }} 
</li> 

JS代碼：

$scope.players = [ 
{name: 'Gene', team: 'alpha'}, 
{name: 'George', team: 'beta'}, 
{name: 'Steve', team: 'gamma'}, 
{name: 'Paula', team: 'beta'}, 
{name: 'Scruath', team: 'gamma'} 
]; 

我得到錯誤的this type：

Error: $injector:unpr Unknown Provider Unknown provider: groupByFilterProvider <- groupByFilter

Answer 1

groupBy是不是建立在由角提供的過濾器，你可以使用angular.filter模塊，可以提供你喜歡GROUPBY許多過濾器，壓平，filterBy，動物內臟等

//added angular.filter module after adding its reference 
angular.module('myApp', ['angular.filter']); 

Here你可以找到的內置列表在過濾器

Answer 2

寫一個特定的功能來劃分數據：

function Main($scope) { 
 
    $scope.players = [ 
 
    {name: 'Gene', team: 'alpha'}, 
 
    {name: 'George', team: 'beta'}, 
 
    {name: 'Steve', team: 'gamma'}, 
 
    {name: 'Paula', team: 'beta'}, 
 
    {name: 'Scruath', team: 'gamma'} 
 
    ]; 
 

 
    var indexedTeams = []; 
 

 
    $scope.playersToFilter = function() { 
 
    indexedTeams = []; 
 
    return $scope.players; 
 
    } 
 

 
    $scope.filterTeams = function(player) { 
 
    var teamIsNew = indexedTeams.indexOf(player.team) == -1; 
 
    if (teamIsNew) { 
 
     indexedTeams.push(player.team); 
 
    } 
 
    return teamIsNew; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app ng-controller="Main"> 
 
    <div ng-repeat="p in playersToFilter() | filter:filterTeams"> 
 
    <b>{{p.team}}</b> 
 
    <li ng-repeat="player in players | filter:{team: p.team}">{{player.name}}</li> 
 
    </div> 
 
</div>