I extended the Angular filter group by example to the following by transforming the team to 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="[email protected]" data-semver="1.6.2" src=".6.2/angular.js"></script>
<script data-require="angular-filter@*" data-semver="0.5.7" src="//cdnjs.cloudflare/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>I extended the Angular filter group by example to the following by transforming the team to 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="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis./ajax/libs/angularjs/1.6.2/angular.js"></script>
<script data-require="angular-filter@*" data-semver="0.5.7" src="//cdnjs.cloudflare./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>But, what if I need the team id in the group by? What can I do?
<a href="#I need the team ID">Group name: {{ team }}</a>
I tried to group by the team object and use team.name and team.id but it didn't work. Also, I didn't know how to create a group by with multiple fields (team.id, team.name)
Here's a working plnkr
Share Improve this question edited Apr 3, 2017 at 8:27 EddyG asked Apr 3, 2017 at 7:24 EddyGEddyG 2,1393 gold badges26 silver badges53 bronze badges 9-
after
groupBy, you will probably have two different team id of the same group name, is this all right? – Pengyy Commented Apr 3, 2017 at 7:33 - @Pengyy when I group by team, I will have 1 id and 1 name for a team. And 1 team having multiple players – EddyG Commented Apr 3, 2017 at 7:36
- Haha eddy, an other questions of you. And same as all time, wrong approach results in error =) – lin Commented Apr 3, 2017 at 7:44
- @lin What's wrong now? When I have a team name I need a link to click on it to see the team details, so to reach it I need the team id in the link. Solve it :p – EddyG Commented Apr 3, 2017 at 7:46
- 1 Its not possible, due to your data format. It doesnt make sense. You group by name but e.g. team name "gamma" has 2 different IDs. – lin Commented Apr 3, 2017 at 7:49
2 Answers
Reset to default 4I have a simple solution:
I grouped by team.id
<li ng-repeat="(teamid, players) in players | groupBy: 'team.id'">
Then I used: players[0].team.name within the group
<li ng-repeat="(teamid, players) in players | groupBy: 'team.id'">
<a href="#Here I can use the group teamid">Group name: {{ players[0].team.name }}</a>
<ul>
<li ng-repeat="player in players">
player: {{ player.name }}
</li>
</ul>
</li>
Since players in each group are only the players belonging to this group where all of them have the same team, so players[0], players[1] and so on will have the same team name.
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="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis./ajax/libs/angularjs/1.6.2/angular.js"></script>
<script data-require="angular-filter@*" data-semver="0.5.7" src="//cdnjs.cloudflare./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="(teamid, players) in players | groupBy: 'team.id'">
<a href="#Here I can use the group teamid">Group name: {{ players[0].team.name }}</a>
<ul>
<li ng-repeat="player in players">
player: {{ player.name }}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>You should group by team.id because a team name is not unique. In that way you avoid a wrong data output. Ok, well. I was able to solve your problem by pre-collecting your team in the controller and normalize them by team.idin a seperate object - demo fiddle:
View
<body ng-app="myApp">
<div ng-controller="MainController">
<ul>
<li ng-repeat="(team, players) in players | groupBy: 'team.id'">
<a href="{{ team }} ">Group name: {{ teams[team].name }}</a>
<ul>
<li ng-repeat="player in players">
player: {{ player.name }}
</li>
</ul>
</li>
</ul>
</div>
</body>
AngularJS Application
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' : '4',
'name' : 'beta'
}
}, {
name: 'Scruath',
team: {
'id' : '5',
'name' : 'gamma'
}
}];
$scope.teams = {};
$scope.players.forEach(function (player) {
if (angular.isUndefined($scope.teams[player.team.id])) {
$scope.teams[player.team.id] = player.team;
}
});
}]);