Wie gruppiere ich Daten nach Team mithilfe des GroupBy-Filters von Angular?

Daten mit Angular-Filter gruppieren: Eine umfassende Anleitung

Das Gruppieren von Daten in sinnvolle Kategorien ist eine häufige Aufgabe in der Programmierung, und Angular bietet eine leistungsstarke Filtermechanismus, um dies zu erleichtern. Dieser Artikel zeigt, wie Sie den GroupBy-Filter von Angular verwenden, um eine Liste von Spielern in Teams zu organisieren.

Problem:

Sie haben einen Datensatz von Spielern mit ihren jeweiligen Teams. Sie müssen diesen Datensatz filtern, um Spieler nach ihren Teams gruppiert anzuzeigen.

Beispieldatensatz:

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' }
];

Erwartete Ausgabe:

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

Lösung:

Um dies zu erreichen Für die Gruppierung stellt Angular den Filter „groupBy“ aus seinem Modul „angular.filter“ bereit. Dieser Filter nimmt eine Eigenschaft als Argument und gibt ein Objekt zurück, bei dem die Schlüssel die eindeutigen Werte dieser Eigenschaft sind und die Werte Arrays der Objekte sind, die diesen Eigenschaftswert gemeinsam haben.

In unserem Fall möchten wir Gruppieren Sie Spieler nach ihrem Teameigentum. So können wir es machen:

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>

Durch die Kombination der Mit dem Filter „groupBy“ mit ng-repeat können wir eine hierarchische Ansicht der Daten erstellen, in der jedes Team als Listenelement angezeigt wird Spieler, die zu diesem Team gehören, werden als verschachtelte Listenelemente aufgeführt. Das Ergebnis ist eine organisierte und leicht verständliche Darstellung der gruppierten Daten.

Hinweis:

Um das Modul angle.filter zu verwenden, muss es als hinzugefügt werden eine Abhängigkeit in Ihrem Angular-Modul.

Das obige ist der detaillierte Inhalt vonWie gruppiere ich Daten nach Team mithilfe des GroupBy-Filters von Angular?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!