2016-10-18 20 views
0

毎週オブジェクトを繰り返したいと思う。 31日間と言えば、31日を毎週表示する必要があります。私はlimitTo: 7を使ってみましたが、残念ながらそれは動作しません。私が試みたコードの下に。週単位の角繰り返し数

同じdivを持っていて、クラスclass="accordian-section"が7つのオブジェクトごとに繰り返される必要があります。すなわち1番目の7は1 <div>です。そして、次の7つのオブジェクトについては同じことを繰り返す必要があります。

<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> 
+0

表示するデータを表すデータ構造を構築する必要があります。例えばその配列の配列を持つことができます。ここで、内部配列は、その月の曜日に分割されたデータです。その後、配列を繰り返してデータを表示することができます – Magrangs

+0

私はコードの小さな断片を持つことができるので、私はスタッフをするいくつかのアイデアを得るでしょうか? @Magrangs – Samir

+0

多次元配列5 * 7スパンを試して、2回のngリピートを行います。コントローラは、ビューがレンダリングできるデータを準備する責任があり、ビューがその責任を自身に負うことはありません。このような変換は、コントローラ上で容易に実行される。 多次元配列としてデータを変換する簡単な方法については、この[SO Link](http://stackoverflow.com/questions/36678928/nested-ng-repeat-for-multidimensional-array)をお試しください。 – Mahesh

答えて

1

多次元配列に変換します。イテレート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) 


    } 
+0

ありがとう@アーラン、このアイデアは私のために働く。 – Samir