Wie kann ich Daten mithilfe des „groupBy“-Filters von Angular nach einer Eigenschaft gruppieren?

Gruppieren von Daten mit Angular-Filtern

In Angular-Anwendungen ist die Datengruppierung eine häufige Aufgabe, um große Datensätze zu organisieren. Mit dem Filter „groupBy“ können Sie Ihre Daten ganz einfach nach einer bestimmten Eigenschaft gruppieren und strukturiert anzeigen.

Problem:

Stellen Sie sich vor, Sie haben eine Reihe von Spielern , jeweils mit einer „Team“-Eigenschaft. Sie möchten eine Liste der Spieler gruppiert nach ihren Teams anzeigen.

[
  { 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

Lösung:

$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>

Der GroupBy-Filter nimmt einen Eigenschaftsnamen und gruppiert die Array-Elemente nach dieser Eigenschaft. Im obigen Code werden die Spieler nach ihrer Teameigenschaft gruppiert.

HINWEIS:

Um den GroupBy-Filter zu verwenden, müssen Sie die Angular.filter-Abhängigkeit in Ihre einschließen Modul und stellen Sie sicher, dass die Datei „angular-filter.js“ in Ihre Anwendung geladen wird.

Mit diesem leistungsstarken Filter können Sie Daten in Ihren Angular-Anwendungen einfach organisieren und anzeigen und so eine strukturierte Struktur bereitstellen und intuitive Benutzererfahrung.

Das obige ist der detaillierte Inhalt vonWie kann ich Daten mithilfe des „groupBy“-Filters von Angular nach einer Eigenschaft gruppieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!