このテーブルのデザインをCSSで角度をつけて作成する方法

Question

角度コントローラでこのフォーマットのIデータ。これらはダミーデータであり、後で何らかのサービスからフェッチされます。

$scope.attendanceLog = 
    { 
     attendances: 
     [ 
      { 
       date:'12.12.17', 
       entries: 
       [ 
        { 
         time:'12PM', 
         device:'1212', 
         location:'katabon' 
        }, 
        { 
         time:'1PM', 
         device:'1212', 
         location:'katabon' 
        }, 
        { 
         time:'2PM', 
         device:'1321', 
         location:'katabon' 
        } 
       ] 

      }, 
      { 
       date:'13.12.17', 
       entries: 
        [ 
         { 
          time:'12PM', 
          device:'1212', 
          location:'katabon' 
         }, 
         { 
          time:'1PM', 
          device:'1212', 
          location:'katabon' 
         }, 
         { 
          time:'2PM', 
          device:'1321', 
          location:'katabon' 
         }, 
         { 
          time:'5PM', 
          device:'1321', 
          location:'katabon' 
         } 
        ] 
      } 
     ] 
    }; 

このようにこのデータを表示するようにテーブルを設計しました。ここでは、テーブル、私は強調表示のセクション背景切り抜いた色の他のすべてのインスタンスを作りたい

<table class="table table-bordered"> 
<thead> 
    <th>Date</th> 
    <th class="text-center">Time</th> 
    <th class="text-center">Device</th> 
    <th class="text-center">Location</th> 
</thead> 

<tbody> 
<tr ng-repeat-start="attendance in attendanceLog.attendances"> 
    <td rowspan="{{attendance.entries.length}}" class="date">{{attendance.date}}</td> 
    <td>{{attendance.entries[0].time}}</td> 
    <td>{{attendance.entries[0].device}}</td> 
    <td>{{attendance.entries[0].location}}</td> 
</tr> 

<tr ng-repeat-end ng-repeat="entries in attendance.entries" ng-if="$index>0"> 
    <td>{{entries.time}}</td> 
    <td>{{entries.device}}</td> 
    <td>{{entries.location}}</td> 
</tr> 
</tbody> 

のHTMLコード です。 Here is the reference image. 5つの日付がある場合、1,3,5番目の日付セルとその右側にある他のすべてのセルは異なる色になります。

ここで、これを角度で行う方法はありますか。その愚かな質問があれば申し訳ありません。私はフロントエンドの開発に新しいです。

<tbody> 
    <tr ng-repeat="..." 
    ng-class-odd="'someOddClass'" ng-class-even="'someEvenClass'"> 
    </tr> 
</tbody> 

は、次に、あなたは自分のスタイルを変更する必要があるだろう：

Answer 1

あなたは利用NG-クラス奇数とNG-クラスにもテーブルエントリとのための1つの表現を持って、それを変更することができます。