요소의 각 ng-반복 조건부 랩 항목(ng-반복 그룹 항목)

요소의 각 ng-반복 조건부 랩 항목(ng-반복 그룹 항목)

조건을 붙여 ng-repeat으로 아이템을 그룹화하려고 합니다.

예를 들어 모든 요소를 같은 시간으로 그룹화하는 것이 조건입니다.

데이터:

[
    {name: 'AAA', time: '12:05'},
    {name: 'BBB', time: '12:10'},
    {name: 'CCC', time: '13:20'},
    {name: 'DDD', time: '13:30'},
    {name: 'EEE', time: '13:40'},
    ...
]

'time' 필드는 실제로는 타임스탬프(1399372207)이지만 정확한 시간을 사용하면 출력 예를 이해하기 쉬워집니다.

ng-repeat을 사용하여 다음 아이템을 나열하고 있습니다.

<div ng-repeat="r in data| orderBy:sort:direction">
   <p>{{r.name}}</p>
</div>

또, 다음과 같이 시험했습니다.

<div ng-repeat-start="r in data| orderBy:sort:direction"></div>
    <p>{{r.name}}</p>
<div ng-repeat-end></div>

유효한 출력은 다음과 같습니다.

<div class="group-class">
    <div><p>AAA</p></div>
    <div><p>BBB</p></div>
</div>
<div class="group-class">
    <div><p>CCC</p></div>
    <div><p>DDD</p></div>
    <div><p>EEE</p></div>
</div>

내 문제에 대한 간단한 해결책이 없을 경우 마지막 옵션은 데이터를 그룹화하여 ng-repeat에서 사용되는 범위 변수에 할당하는 것입니다.

무슨 생각 있어?

각도의 groupBy 필터를 사용할 수 있습니다.필터 모듈
다음과 같은 작업을 수행할 수 있습니다.

사용방법: collection | groupBy:property
점 표기법에 중첩 특성 사용:property.nested_property
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>

결과:
그룹명 : alpha
* 플레이어: Gene
그룹명: 베타
* 플레이어: George
* 선수: Paula
그룹명: 감마
* 플레이어:스티브
* 선수: 스크래치

갱신: jsbin

컨트롤러의 첫 번째 그룹 만들기:

 $scope.getGroups = function () {
    var groupArray = [];
    angular.forEach($scope.data, function (item, idx) {
        if (groupArray.indexOf(parseInt(item.time)) == -1) {
            groupArray.push(parseInt(item.time));
        }
    });
    return groupArray.sort();
};

그런 다음 필터 만들기:

 myApp.filter('groupby', function(){
    return function(items,group){       
       return items.filter(function(element, index, array) {
        return parseInt(element.time)==group;
       });        
    }        
 }) ; 

그런 다음 템플릿 변경:

 <div ng-repeat='group in getGroups()'>
     <div ng-repeat="r in data | groupby:group" class="group-class">
         <div><p>{{r.name}}</p></div>
     </div>
 </div>

데모 참조

정적 그룹을 위한 단순한 HTML 솔루션입니다.

<ul>
  Group name: Football
  <li ng-repeat="player in players" ng-if="player.group == 'football'">
    Player Name: {{ player.name }} 
  </li>
  Group name: Basketball
  <li ng-repeat="player in players" ng-if="player.group == 'basketball'">
    Player Name: {{ player.name }} 
  </li>
</ul>

출력:

그룹명:풋볼
- 플레이어 이름:니코뎀
- 플레이어 이름: Lambert
그룹명 : 농구
- 플레이어 이름: John
- 선수명 : Izaék
- 플레이어 이름:디오니시아

언급URL : https://stackoverflow.com/questions/23493063/angular-ng-repeat-conditional-wrap-items-in-element-group-items-in-ng-repeat