CODEWITHSUNDEEP
javascriptjqueryangularjs
Samir
Samir

Reputation: 1368

Angular ng-repeat on weekly basis

I want to iterate the objects on Weekly basis. Lets Say there are 31 days, and i need to show those 31 dates on weekly basis. I tried by using limitTo: 7, but unfortunately it is not working. Below the code which i tried.

I want the same div having class class="accordian-section" needs to be repeat on every 7 objects. i.e. 1st 7 is in 1 <div>. And for the next 7 object the same needs to be repeat. 

<div class="accordian-section" data-ng-repeat="data in vm.dailyUsageList track by $index | limitTo: 7:7">
     <a id="analysisWeek1-title" href="#analysisWeek-1" role="button" data-toggle="collapse" area-controls="analysisWeek-1">Week 1 <span class=""></span></a>
     <ul id="analysisWeek-1" area-labelledby="analysisWeek1-title" class="row position-relative panel-collapse collapse">
        <span class="sprite arrow grey-arrow"></span>
        <li><span class="col-xs-14 padding0">{{data.date | date:'dd MMM yyyy'}}</span><span class="col-xs-2 padding0 text-align-right">{{data.usage}}MB</span></li>
        <li><span class="col-xs-14 padding0">{{data.date | date:'dd MMM yyyy'}}</span><span class="col-xs-2 padding0 text-align-right">{{data.usage}}MB</span></li>
        <li><span class="col-xs-14 padding0">{{data.date | date:'dd MMM yyyy'}}</span><span class="col-xs-2 padding0 text-align-right">{{data.usage}}MB</span></li>
        <li><span class="col-xs-14 padding0">{{data.date | date:'dd MMM yyyy'}}</span><span class="col-xs-2 padding0 text-align-right">{{data.usage}}MB</span></li>
        <li><span class="col-xs-14 padding0">{{data.date | date:'dd MMM yyyy'}}</span><span class="col-xs-2 padding0 text-align-right">{{data.usage}}MB</span></li>
        <li><span class="col-xs-14 padding0">{{data.date | date:'dd MMM yyyy'}}</span><span class="col-xs-2 padding0 text-align-right">{{data.usage}}MB</span></li>
        <li><span class="col-xs-14 padding0">{{data.date | date:'dd MMM yyyy'}}</span><span class="col-xs-2 padding0 text-align-right">{{data.usage}}MB</span></li>
     </ul>
 </div>

Upvotes: 0

Views: 81

Answers (1)

Arunkumar Vasudevan
Arunkumar Vasudevan

Reputation: 5330

Convert single dimensional array into multi dimensional array. and Iterate Fiddle

function MyCtrl($scope) {

        $scope.ArraySplit = function(array, chunk) {
            var temparray = [];
            for (i = 0, j = array.length; i < j; i += chunk) {
                temparray.push(array.slice(i, i + chunk));
            }
            return temparray;
        }


        $scope.arrayList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
                            11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
                            21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];

        $scope.newList = $scope.ArraySplit($scope.arrayList, 7)


    }

Upvotes: 1

Related Questions