Maison > interface Web > js tutoriel > Comment puis-je regrouper et afficher les joueurs par équipes à l'aide de filtres angulaires ?

Comment puis-je regrouper et afficher les joueurs par équipes à l'aide de filtres angulaires ?

DDD
Libérer: 2024-11-18 04:07:02
original
251 Les gens l'ont consulté

How can I group and display players by their teams using Angular filters?

Regroupement de données avec des filtres angulaires

Question : J'ai une liste de joueurs appartenant à différentes équipes. Comment puis-je utiliser un filtre angulaire pour regrouper et afficher les joueurs par équipes ?

Exemple de données :

[{name: 'Gene', team: 'alpha'},
 {name: 'George', team: 'beta'},
 {name: 'Steve', team: 'gamma'},
 {name: 'Paula', team: 'beta'},
 {name: 'Scruath', team: 'gamma'}]
Copier après la connexion

Résultat souhaité :

- team alpha
  - Gene
- team beta
  - George
  - Paula
- team gamma
  - Steve
  - Scruath
Copier après la connexion

Réponse :Pour réaliser ce regroupement, vous pouvez utiliser le filtre groupBy du module angulaire.filter.

JavaScript :

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];
Copier après la connexion

HTML :

<ul ng-repeat="(key, value) in players | groupBy: 'team'">
  <li>Group name: {{ key }}</li>
  <ul>
    <li ng-repeat="player in value">
      Player: {{ player.name }}
    </li>
  </ul>
</ul>
Copier après la connexion

Sortie :

- Group name: alpha
  - Player: Gene
- Group name: beta
  - Player: George
  - Player: Paula
- Group name: gamma
  - Player: Steve
  - Player: Scruath
Copier après la connexion

Remarque :

  • N'oubliez pas d'inclure angulaire.filter dans les dépendances de votre module.
  • Pour plus d'informations sur angulaire.filter, reportez-vous à des ressources externes telles que jsbin.com.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal