Comment puis-je grouper des données avec un filtre Angulaire?

En plus les réponses acceptées ci-dessus, j'ai créé un générique de 'groupe' filtre à l'aide de la underscore.js de la bibliothèque.

JSFiddle (mis à jour):
http://jsfiddle.net/TD7t3/

Le filtre

app.filter('groupBy', function() {
    return _.memoize(function(items, field) {
            return _.groupBy(items, field);
        }
    );
});

Note le "memoize' appel. Ce trait de soulignement méthode met en cache le résultat de la fonction et s'arrête angulaire de l'évaluation de l'expression de filtre à chaque fois, l'empêchant ainsi angulaire d'atteindre le digérer itérations limite.

Le code html

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

Nous appliquer notre "groupe" filtre sur le teamPlayers portée variable, sur la "team" de la propriété. Notre ng-repeat reçoit une combinaison de touche, les valeurs de[]) que nous pouvons utiliser dans notre itérations suivantes.

Mise à jour le 11 juin 2014
J'ai élargi le groupe par le filtre de prendre en compte l'utilisation d'expressions comme la clé (par exemple imbriqués les variables). L'angle d'analyser le service est très pratique pour cela:

Le filtre (avec support des expressions)

app.filter('groupBy', function($parse) {
    return _.memoize(function(items, field) {
        var getter = $parse(field);
        return _.groupBy(items, function(item) {
            return getter(item);
        });
    });
});

Le contrôleur (avec des objets imbriqués)

app.controller('homeCtrl', function($scope) {
    var teamAlpha = {name: 'team alpha'};
    var teamBeta = {name: 'team beta'};
    var teamGamma = {name: 'team gamma'};

    $scope.teamPlayers = [{name: 'Gene', team: teamAlpha},
                      {name: 'George', team: teamBeta},
                      {name: 'Steve', team: teamGamma},
                      {name: 'Paula', team: teamBeta},
                      {name: 'Scruath of the 5th sector', team: teamGamma}];
});

Le html (avec sortBy expression)

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

JSFiddle:
http://jsfiddle.net/k7fgB/2/

J'ai d'abord utilisé Plantface réponse, mais je n'aimais pas la façon dont la syntaxe regardé dans mon point de vue.

J'ai retravaillé à utiliser q$.reporter de post-traiter les données et retourner une liste unique équipes, ce qui est utilise comme le filtre.

http://plnkr.co/edit/waWv1donzEMdsNMlMHBa?p=preview

Vue

<ul>
  <li ng-repeat="team in teams">{{team}}
    <ul>
      <li ng-repeat="player in players | filter: {team: team}">{{player.name}}</li> 
    </ul>
  </li>
</ul>

Contrôleur

app.controller('MainCtrl', function($scope, $q) {

  $scope.players = []; //omitted from SO for brevity

  //create a deferred object to be resolved later
  var teamsDeferred = $q.defer();

  //return a promise. The promise says, "I promise that I'll give you your
  //data as soon as I have it (which is when I am resolved)".
  $scope.teams = teamsDeferred.promise;

  //create a list of unique teams. unique() definition omitted from SO for brevity
  var uniqueTeams = unique($scope.players, 'team');

  //resolve the deferred object with the unique teams
  //this will trigger an update on the view
  teamsDeferred.resolve(uniqueTeams);

});

Mise à jour

J'ai d'abord écrit cette réponse parce que l'ancienne version de la solution proposée par M. Ariel lorsqu'il est combiné avec d'autres $filters déclenché une "Infite $diggest Boucle d'Erreur" (infdig). Heureusement, ce problème a été résolu dans la dernière version de la angulaire.filtre.

J'ai suggéré à la suite de la mise en œuvre, que de ne pas avoir ce problème:

angular.module("sbrpr.filters", [])
.filter('groupBy', function () {
  var results={};
    return function (data, key) {
        if (!(data && key)) return;
        var result;
        if(!this.$id){
            result={};
        }else{
            var scopeId = this.$id;
            if(!results[scopeId]){
                results[scopeId]={};
                this.$on("$destroy", function() {
                    delete results[scopeId];
                });
            }
            result = results[scopeId];
        }

        for(var groupKey in result)
          result[groupKey].splice(0,result[groupKey].length);

        for (var i=0; i<data.length; i++) {
            if (!result[data[i][key]])
                result[data[i][key]]=[];
            result[data[i][key]].push(data[i]);
        }

        var keys = Object.keys(result);
        for(var k=0; k<keys.length; k++){
          if(result[keys[k]].length===0)
            delete result[keys[k]];
        }
        return result;
    };
});

Toutefois, cette application fonctionne uniquement avec les versions antérieures à Angulaires 1.3. (Je mettrai à jour cette réponse peu de temps fournissant une solution qui fonctionne avec toutes les versions.)

En fait, j'ai a écrit un post sur les étapes que j'ai pris pour développer ce $filter, les problèmes que j'ai rencontrés et les choses que j'ai appris d'elle.

Si vous avez besoin que dans le code js. Vous pouvez utiliser injecté méthode de angula-filtre lib.
Comme cette.

function controller($scope, $http, groupByFilter) {     

   var groupedData = groupByFilter(originalArray, 'groupPropName');

}

https://github.com/a8m/angular-filter/wiki/Common-Questions#inject-filters