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 필터는 속성 이름을 사용하고 해당 속성을 기준으로 배열 요소를 그룹화합니다. 위 코드에서 플레이어는 팀 속성별로 그룹화됩니다.

참고:

groupBy 필터를 사용하려면 모듈을 설치하고 angle-filter.js 파일이 애플리케이션에 로드되었는지 확인하세요.

이 강력한 필터를 사용하면 Angular 애플리케이션에서 데이터를 쉽게 구성하고 표시할 수 있어 체계적이고 직관적인 사용자 경험을 제공할 수 있습니다.

위 내용은 Angular의 `groupBy` 필터를 사용하여 속성별로 데이터를 어떻게 그룹화할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!