Angular 필터를 사용하여 데이터를 그룹화하려면 어떻게 해야 합니까?

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

이 결과를 기대하고 있습니다.

• 팀 알파
  • 진
• 팀 베타
  • 조지
  • 폴라
• 팀 감마
  • 스티브
  • 제5섹터의 스크래배스

groupBy of angular를 사용할 수 있습니다.필터 모듈
을 사용하다

JS:

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

과::
:
: Gene * 플 gene : Gene
: 타 group
George* 플레이어: George
* 선수: Paula
(감마) : 감 group
()
: * 수 : 치치 * * * * *

UPDATE:jsbin 사용하기 위한 기본 요구 사항을 기억하십시오.angular.filter특히 모듈의 의존관계에 추가해야 합니다.

(1) angular-filter는 다음의 4가지 방법으로 설치할 수 있습니다.

1. 이 저장소를 복제 및 구축하다
2. via Bower: 단말기에서 $bower install angular-filter를 실행하여
3. npm 경유: 터미널에서 $npm을 실행하여 angular-filter 설치
4. cdnjs http://www.cdnjs.com/libraries/angular-filter 경유

(2) Angular 자체를 포함한 후 index.html에 angular-filter.js(또는 angular-filter.min.js)를 포함시킨다.

(3) angular를 더한다.filter'는 메인 모듈의 종속성 목록으로 이동합니다.

위의 답변에 더해 언더스코어.js 라이브러리를 사용하여 범용 'groupBy' 필터를 작성했습니다.

JSFiddle (표준) : http://jsfiddle.net/TD7t3/

필터

app.filter('groupBy', function() {
    return _.memoize(function(items, field) {
            return _.groupBy(items, field);
        }
    );
});

「메모이즈」콜에 주의해 주세요.이 언더스코어 방법은 함수의 결과를 캐시하고 매번 필터 식을 각도로 평가하지 않도록 하므로 각도가 다이제스트 반복 제한에 도달하는 것을 방지합니다.

html

<ul>
    <li ng-repeat="(team, players) in teamPlayers | groupBy:'team'">
        {{team}}
        <ul>
            <li ng-repeat="player in players">
                {{player.name}}
            </li>
        </ul>
    </li>
</ul>

'groupBy' 필터는 teamPlayers 범위 변수의 'team' 속성에 적용됩니다.ng-repeat은 다음 반복에서 사용할 수 있는 (키, 값[])의 조합을 수신합니다.

업데이트 2014년 6월 11일 키(예: 중첩 변수)로서 표현식을 사용하기 위해 필터별로 그룹을 확장했습니다.각도 해석 서비스는 이 경우에 매우 편리합니다.

필터(식 지원 포함)

app.filter('groupBy', function($parse) {
    return _.memoize(function(items, field) {
        var getter = $parse(field);
        return _.groupBy(items, function(item) {
            return getter(item);
        });
    });
});

컨트롤러(네스트된 개체 포함)

app.controller('homeCtrl', function($scope) {
    var teamAlpha = {name: 'team alpha'};
    var teamBeta = {name: 'team beta'};
    var teamGamma = {name: 'team gamma'};

    $scope.teamPlayers = [{name: 'Gene', team: teamAlpha},
                      {name: 'George', team: teamBeta},
                      {name: 'Steve', team: teamGamma},
                      {name: 'Paula', team: teamBeta},
                      {name: 'Scruath of the 5th sector', team: teamGamma}];
});

html(sortBy 식 포함)

<li ng-repeat="(team, players) in teamPlayers | groupBy:'team.name'">
    {{team}}
    <ul>
        <li ng-repeat="player in players">
            {{player.name}}
        </li>
    </ul>
</li>

JSFiddle:http://jsfiddle.net/k7fgB/2/

먼저 고유한 팀만 반환하는 필터를 사용하여 루프를 실행하고 다음으로 현재 팀당 모든 플레이어를 반환하는 중첩 루프를 수행합니다.

http://jsfiddle.net/plantface/L6cQN/

html:

<div ng-app ng-controller="Main">
    <div ng-repeat="playerPerTeam in playersToFilter() | filter:filterTeams">
        <b>{{playerPerTeam.team}}</b>
        <li ng-repeat="player in players | filter:{team: playerPerTeam.team}">{{player.name}}</li>        
    </div>
</div>

스크립트:

function Main($scope) {
    $scope.players = [{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'}];

    var indexedTeams = [];

    // this will reset the list of indexed teams each time the list is rendered again
    $scope.playersToFilter = function() {
        indexedTeams = [];
        return $scope.players;
    }

    $scope.filterTeams = function(player) {
        var teamIsNew = indexedTeams.indexOf(player.team) == -1;
        if (teamIsNew) {
            indexedTeams.push(player.team);
        }
        return teamIsNew;
    }
}

저는 원래 Plantface의 답변을 사용했는데, 제가 보기에는 구문이 마음에 들지 않았습니다.

$q.defer를 사용하여 데이터를 후처리하고 고유한 팀의 목록을 반환하도록 수정했습니다. 이 목록은 필터로 사용됩니다.

http://plnkr.co/edit/waWv1donzEMdsNMlMHBa?p=preview

보다

<ul>
  <li ng-repeat="team in teams">{{team}}
    <ul>
      <li ng-repeat="player in players | filter: {team: team}">{{player.name}}</li> 
    </ul>
  </li>
</ul>

컨트롤러

app.controller('MainCtrl', function($scope, $q) {

  $scope.players = []; // omitted from SO for brevity

  // create a deferred object to be resolved later
  var teamsDeferred = $q.defer();

  // return a promise. The promise says, "I promise that I'll give you your
  // data as soon as I have it (which is when I am resolved)".
  $scope.teams = teamsDeferred.promise;

  // create a list of unique teams. unique() definition omitted from SO for brevity
  var uniqueTeams = unique($scope.players, 'team');

  // resolve the deferred object with the unique teams
  // this will trigger an update on the view
  teamsDeferred.resolve(uniqueTeams);

});

두 답변 모두 양호했기 때문에 재사용이 가능하고 두 번째 범위 변수를 정의할 필요가 없도록 지시문으로 옮겼습니다.

실장된 것을 보고 싶다면 여기 바이올린이 있습니다.

다음은 지시사항입니다.

var uniqueItems = function (data, key) {
    var result = [];
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];
        if (result.indexOf(value) == -1) {
            result.push(value);
        }
    }
    return result;
};

myApp.filter('groupBy',
            function () {
                return function (collection, key) {
                    if (collection === null) return;
                    return uniqueItems(collection, key);
        };
    });

다음으로 다음과 같이 사용할 수 있습니다.

<div ng-repeat="team in players|groupBy:'team'">
    <b>{{team}}</b>
    <li ng-repeat="player in players | filter: {team: team}">{{player.name}}</li>        
</div>

갱신하다

Ariel M.이 제안한 솔루션의 이전 버전이 다른 s와 결합되었을 때 "Infite $digest Loop Error"()infdig가 발생했기 때문에 처음에 이 답변을 작성했습니다.다행히 이 문제는 angular의 최신 버전에서 해결되었습니다.필터링을 실시합니다.

저는 다음과 같은 구현을 제안했지만, 이러한 문제는 없었습니다.

angular.module("sbrpr.filters", [])
.filter('groupBy', function () {
  var results={};
    return function (data, key) {
        if (!(data && key)) return;
        var result;
        if(!this.$id){
            result={};
        }else{
            var scopeId = this.$id;
            if(!results[scopeId]){
                results[scopeId]={};
                this.$on("$destroy", function() {
                    delete results[scopeId];
                });
            }
            result = results[scopeId];
        }

        for(var groupKey in result)
          result[groupKey].splice(0,result[groupKey].length);

        for (var i=0; i<data.length; i++) {
            if (!result[data[i][key]])
                result[data[i][key]]=[];
            result[data[i][key]].push(data[i]);
        }

        var keys = Object.keys(result);
        for(var k=0; k<keys.length; k++){
          if(result[keys[k]].length===0)
            delete result[keys[k]];
        }
        return result;
    };
});

단, 이 구현은 Angular 1.3 이전 버전에서만 작동합니다(모든 버전에서 사용할 수 있는 솔루션을 곧 업데이트하겠습니다).

저는 실제로 이것을 개발하기 위해 취한 조치들, 제가 부딪힌 문제들, 그리고 그것으로부터 배운 것들에 대해 글을 썼습니다.

승인된 답변 외에 여러 열로 그룹화하려는 경우 다음과 같이 사용할 수 있습니다.

<ul ng-repeat="(key, value) in players | groupBy: '[team,name]'">

js코드에 그것이 필요한 경우.Angula-filter lib 주입 방식을 사용할 수 있습니다.이것처럼.

function controller($scope, $http, groupByFilter) {     

   var groupedData = groupByFilter(originalArray, 'groupPropName');

}

https://github.com/a8m/angular-filter/wiki/Common-Questions#inject-filters

언급URL : https://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter