'td'列にng-repeatを使用する場合のテーブル行の変更方法（可能な場合）

Question

テーブルを作成しています。その頭の中には、7つの列が並んでいます（日曜日、月曜日...）。 今はtbodyの列に、私は列を日として繰り返しています（私は30日持っています）。 それは私たちが知っているように、その単一のすべての30の項目を繰り返しています。 だから、私は体の行に最初の7つの項目が必要です。次に次の7つは次の行に.. 解決策は役に立ちますか？ はここで$ scope.staticEventsが配列である

<table class="table table-bordered"> 
<thead> 
    <th>Sunday</th> 
    <th>Monday</th> 
    <th>Tuesday</th> 
    <th>Wednesday</th> 
    <th>Thursday</th> 
    <th>Friday</th> 
    <th>Saturday</th>         
</thead> 
<tbody> 
    <td ng-repeat="day in staticEvents"><span>{{day.title}}</span></td> 
</tbody> 

は30個のオブジェクト（APIレスポンスを）持っている私のマークアップです。

Answer 1

私はあなたが助けてくれることを願っています。これは$ indexで行うことができます。

<div data-ng-app="" data-ng-init="days=['1','2','3','4','5','6','7','8','9','10','11','..']" class="container"> 
    <table class="table table-bordered"> 
    <thead> 
     <th>Sunday</th> 
     <th>Monday</th> 
     <th>Tuesday</th> 
     <th>Wednesday</th> 
     <th>Thursday</th> 
     <th>Friday</th> 
     <th>Saturday</th> 
    </thead> 
    <tbody> 
     <tr ng-repeat="day in days" ng-if="$index % 7 == 0"> 
     <td class="col">{{days[$index]}}</td> 
     <td class="col">{{days[$index + 1]}}</td> 
     <td class="col">{{days[$index + 2]}}</td> 
     <td class="col">{{days[$index + 3]}}</td> 
     <td class="col">{{days[$index + 4]}}</td> 
     <td class="col">{{days[$index + 5]}}</td> 
     <td class="col">{{days[$index + 6]}}</td> 

     </tr> 
    </tbody> 
    </table> 

</div> 

Fiddle

Answer 2

私はあなたのデータ構造を少し変更することをお勧め。シンプルなアレイでは、ng-ifまたはng-switchの1回の反復で複数行のテーブルを作成することは困難です。 このデータ構造の設計では、日曜日に第1日曜日、第2日曜日、月曜日があります。

"月"を準備してから行くことができる2次元配列を作成してみてください2回の繰返しによって何かのように：

コントローラー：

$scope.month = makeMonth($scope.staticEvents, 3); 

function makeMonth(days, firstIndex) { 
// days[] - array of days in month 
//fisrstIndex - index of the first day in month: 0=Sunday, ..., 6=Saturday 
    if (!angular.isArray(days) || firstIndex < 0 || firstIndex > 6) { 
     return []; 
    } 
    var month = []; 
    var row = []; 
    for (i=0; i < days.length + firstIndex; i++) { 
     var day = { 
      title: "" 
     }; 
     if (i >= firstIndex) { 
      day = days[i - firstIndex]; 
     } 
     row.push(day); 
     if (i % 7 === 6) { 
      month.push(row); 
      row = []; 
     } 
    } 
    if (row != []) { 
     month.push(row); 
    } 
    return month; 
} 

テンプレート：

<table class="table table-bordered"> 
    <thead> 
     <th>Sunday</th> 
     <th>Monday</th> 
     <th>Tuesday</th> 
     <th>Wednesday</th> 
     <th>Thursday</th> 
     <th>Friday</th> 
     <th>Saturday</th>         
    </thead> 
    <tbody> 
     <tr ng-repeat="row in month"> 
      <td ng-repeat="day in row"><span>{{day.title}}</span></td> 
     </tr> 
    </tbody> 
</table>