Question

我在角度控制器中以这种格式输入数据。这些是虚拟数据，稍后将从某种服务中获取。

$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'
                      }
                  ]
          }
      ]
    };

现在我设计了表来查看这样的数据。这是html代码对于表

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

我想制作突出显示的部分的所有其他实例＆＃39;背景颜色不同。Here is the reference image. 因此，如果有5个日期，则第1个，第3个和第5个日期单元格以及右侧的所有其他单元格将具有不同的颜色。

现在有任何方法可以用角度来做到这一点。如果这是一个愚蠢的问题，我很抱歉。我是前端开发的新手。

Answer 1

您可以将其更改为具有表条目的一个表达式，并使用ng-class-odd和ng-class-even：

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

然后你只需要改变你的造型。

Answer 2

我没有在表格中打印新行，而是为每个日期创建了一个新表。然后我在每个奇数表上应用了css类。

<table class="table table-bordered" ng-repeat="...." class =
  ng-class ="$index % 2 == 0 ? 'table table-bordered striped':'table table-bordered'" >
   .......
   .......
</table>

条纹是我用来突出奇数记录背景不同颜色的类

如何使用css使这个表设计成角度

2 个答案: