First do a loop using a filter that
will return only unique teams, and then a nested loop that returns all players
per current team: http://jsfiddle.net/5jwvto7y/
HTML Code looks like –
<div ng-app="app">
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="(team, players) in teamPlayers |
groupBy:'team'">
{{team}}
<ul>
<li ng-repeat="player in players">
{{player.name}}
</li>
</ul>
</li>
</ul>
</div>
</div>
JS Code looks like –
var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
//Players
List
$scope.teamPlayers = [
{ name: 'Anil', team: 'A' },
{name: 'Sushil', team: 'B'},
{name: 'Tinku', team: 'B'},
{name: 'Aradhya', team: 'G'},
{name: 'Reena', team: 'G'}];
});
//groupBy
with Players
app.filter('groupBy', function($parse) {
return _.memoize(function(items, field) {
var getter = $parse(field);
return _.groupBy(items, function(item) {
return getter(item);
});
});
});
Live Result –