如何使用角度过滤器对元素进行分组？

我面临的问题，在分组相同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

来源

2017-03-27 anub

这不是强制性的，但我们鼓励您接受或赞扬有用的答案。下面有两个答案可以从你的注意中受益。 – halfer

groupBy是不是建立在由角提供的过滤器，你可以使用angular.filter模块，可以提供你喜欢GROUPBY许多过滤器，压平，filterBy，动物内脏等

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

Here你可以找到的内置列表在过滤器

来源

2017-03-27 11:34:30

写一个特定的功能来划分数据：

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>

来源

2017-03-27 11:35:28 Mistalis

如何使用角度过滤器对元素进行分组？

回答

相关问题