如何使用 Angular 的“groupBy”篩選器按屬性對資料進行分組？

使用 Angular 過濾器將資料分組

在 Angular 應用程式中，資料分組是組織大型資料集的常見任務。使用 groupBy 篩選器，您可以輕鬆地按特定屬性對資料進行分組並以結構化方式顯示。

問題：

假設您有一組玩家，每個都有一個「團隊」屬性。您希望顯示按球隊分組的球員清單。

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

期望結果：

team alpha
 - Gene

team beta
 - George
 - Paula

team gamma
 - Steve
 - Scruath

解：

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

解器採用屬性名稱和群組該屬性的陣列元素。在上面的程式碼中，玩家按照他們的團隊屬性進行分組。

注意：

要使用groupBy 過濾器，您必須在您的程式碼中包含angular.filter 依賴項模組並確保angular-filter.js 檔案已加​​載到您的應用程式。

這個強大的過濾器使您能夠輕鬆組織和顯示資料Angular 應用程序，提供結構化且直觀的用戶體驗。

以上是如何使用 Angular 的“groupBy”篩選器按屬性對資料進行分組？的詳細內容。更多資訊請關注PHP中文網其他相關文章！