Comment regrouper les données par équipe à l'aide du filtre groupBy d'Angular ?

Regrouper les données avec un filtre angulaire : un guide complet

Regrouper les données en catégories significatives est une tâche courante en programmation, et Angular fournit un outil puissant mécanisme de filtrage pour faciliter cela. Cet article montre comment utiliser le filtre groupBy d'Angular pour organiser une liste de joueurs en équipes.

Problème :

Vous disposez d'un ensemble de données de joueurs avec leurs équipes respectives. Vous devez filtrer cet ensemble de données pour afficher les joueurs regroupés par leurs équipes.

Exemple d'ensemble de données :

players = [
  { name: 'Gene', team: 'team alpha' },
  { name: 'George', team: 'team beta' },
  { name: 'Steve', team: 'team gamma' },
  { name: 'Paula', team: 'team beta' },
  { name: 'Scruath', team: 'team gamma' }
];

Résultat attendu :

<li>team alpha
  <ul>
    <li>Gene</li>
  </ul>
</li>
<li>team beta
  <ul>
    <li>George</li>
    <li>Paula</li>
  </ul>
</li>
<li>team gamma
  <ul>
    <li>Steve</li>
    <li>Scruath</li>
  </ul>
</li>

Solution :

Pour y parvenir regroupement, Angular fournit le filtre groupBy à partir de son module angulaire.filter. Ce filtre prend une propriété comme argument et renvoie un objet où les clés sont les valeurs uniques de cette propriété et les valeurs sont des tableaux d'objets qui partagent cette valeur de propriété.

Dans notre cas, nous voulons regrouper les joueurs par propriété de leur équipe. Voici comment procéder :

JavaScript :

$scope.players = players; // Assign the dataset to a scope variable

HTML :

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

En combinant les Le filtre groupBy avec ng-repeat, nous pouvons créer une vue hiérarchique des données, où chaque équipe est affichée sous forme d'élément de liste, et les joueurs appartenant à cette équipe sont répertoriés sous forme d'éléments de liste imbriqués. Le résultat est une représentation organisée et facile à comprendre des données groupées.

Remarque :

Pour utiliser le module angulaire.filter, il doit être ajouté comme une dépendance dans votre module Angular.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!