Wie kann ich Spieler mithilfe von Angular-Filtern nach ihren Teams gruppieren und anzeigen?

Daten mit Winkelfiltern gruppieren

Frage: Ich habe eine Liste von Spielern, die verschiedenen Teams angehören. Wie kann ich einen Angular-Filter verwenden, um Spieler nach ihren Teams zu gruppieren und anzuzeigen?

Beispieldaten:

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

Gewünschtes Ergebnis:

- team alpha
  - Gene
- team beta
  - George
  - Paula
- team gamma
  - Steve
  - Scruath

Antwort: Um diese Gruppierung zu erreichen, können Sie den GroupBy-Filter aus dem Modul angle.filter verwenden.

JavaScript:

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

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>

Ausgabe:

- Group name: alpha
  - Player: Gene
- Group name: beta
  - Player: George
  - Player: Paula
- Group name: gamma
  - Player: Steve
  - Player: Scruath

Hinweis:

• Denken Sie daran, „angular.filter“ in die Abhängigkeiten Ihres Moduls aufzunehmen.
• Weitere Informationen zu „angular.filter“ finden Sie in externen Ressourcen wie jsbin.com.

Das obige ist der detaillierte Inhalt vonWie kann ich Spieler mithilfe von Angular-Filtern nach ihren Teams gruppieren und anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!