在 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 sectorAngular 提供了一個非常寶貴的過濾器，名為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 中的特定屬性對資料進行分組？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
