Comment puis-je regrouper des données par propriété à l'aide du filtre « groupBy » d'Angular ?

Regroupement de données avec des filtres angulaires

Dans les applications angulaires, le regroupement de données est une tâche courante pour organiser de grands ensembles de données. À l'aide du filtre groupBy, vous pouvez facilement regrouper vos données par une propriété spécifique et les afficher de manière structurée.

Problème :

Imaginez que vous ayez un éventail de joueurs , chacun avec une propriété "équipe". Vous souhaitez afficher une liste de joueurs regroupés par leurs équipes.

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

Résultat souhaité :

team alpha
 - Gene

team beta
 - George
 - Paula

team gamma
 - Steve
 - Scruath

Solution :

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

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

Le filtre groupBy prend un nom de propriété et regroupe les éléments du tableau en fonction de cette propriété. Dans le code ci-dessus, les joueurs sont regroupés par propriété de leur équipe.

REMARQUE :

Pour utiliser le filtre groupBy, vous devez inclure la dépendance angulaire.filter dans votre et assurez-vous que le fichier angulaire-filter.js est chargé dans votre application.

Ce filtre puissant vous permet d'organiser et d'afficher facilement les données dans vos applications Angular, offrant une expérience utilisateur structurée et intuitive.

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!