如何按 Angular 中的特定屬性對資料進行分組？

在 Angular 中有效地對資料進行分組：利用 groupBy 過濾器

在 Angular 應用程式領域，有效組織和顯示複雜的資料集至關重要。一種有效的方法是根據特定標準對資料進行分組，使用戶能夠輕鬆導航和理解資訊。

問題陳述

假設您有一份屬於各個團隊的球員清單。您的任務是以結構化​​的方式呈現這些數據，列出各自團隊中的球員。例如：

玩家名單：

[
  {name: 'Gene', team: 'team alpha'},
  {name: 'George', team: 'team beta'},
  {name: 'Steve', team: 'team gamma'},
  {name: 'Paula', team: 'team beta'},
  {name: 'Scruath of the 5th sector', team: 'team gamma'}
]

期望結果：

 - team alpha
    - Gene
 - team beta
    - George
    - Paula
 - team gamma
    - Steve
    - Scruath of the 5th sector

解決方案：利用團隊透過過濾器

Angular 提供了一個非常寶貴的過濾器，名為groupBy使您能夠根據指定的屬性輕鬆對資料進行分組。透過利用此過濾器，您可以直接獲得所需的結果。

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'">
  Group name: {{ key }}
  <li ng-repeat="player in value">
    player: {{ player.name }} 
  </li>
</ul>

結果

執行程式碼時，您將獲得以下輸出：

Group name: alpha
  * player: Gene
Group name: beta
  * player: George
  * player: Paula
Group name: gamma
  * player: Steve
  * player: Scruath

正如您所觀察到的，玩家現在根據他們的團隊進行分組，提供更有條理且用戶友好的數據表示。

有關使用Angular 的附加說明.filter

要充分利用angular.filter 的實用性，請記住以下關鍵點步驟：

• 在模組的依賴項清單中包含“angular.filter”。
• 在index.html 中包含angular-filter.js 文件，確保它在Angular 本身之後加載.
• 選擇四種可用安裝方法之一，將角度過濾器整合到您的項目中。

以上是如何按 Angular 中的特定屬性對資料進行分組？的詳細內容。更多資訊請關注PHP中文網其他相關文章！