I modified the Angular filter group by example by converting the team into an object.
var app = angular.module('myApp',['angular.filter']);
app.controller('MainController', ['$scope', function($scope){
$scope.players = [
{
name: 'Gene',
team: {
'id' : '1',
'name' : 'alpha'
}
},
{
name: 'George',
team: {
'id' : '2',
'name' : 'beta'
}
},
{
name: 'Steve',
team: {
'id' : '3',
'name' : 'gamma'
}
},
{
name: 'Paula',
team: {
'id' : '2',
'name' : 'beta'
}
},
{
name: 'Scruath',
team: {
'id' : '3',
'name' : 'gamma'
}
}
];
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0c030a18010c1f071e2d5c435b435f">[email protected]</a>" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script data-require="angular-filter@*" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainController">
<ul>
<li ng-repeat="(team, players) in players | groupBy: 'team.name'">
<a href="#I need the team ID">Group name: {{ team }}</a>
<ul>
<li ng-repeat="player in players">
player: {{ player.name }}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>However, if I require the team id in the group by, what should I do?
<a href="#I need the team ID">Group name: {{ team }}</a>
I attempted to group by the team object using team.name and team.id, but it was unsuccessful. Additionally, I struggled with creating a group by with multiple fields like (team.id, team.name)
Here's a functional plnkr