具有嵌套ng-repeat条带行的Bootstrap表

Question

我有一个表应该显示条带行,但由于我有嵌套的ng-repeats,我的输出有一组行颜色相同而不是条纹.任何方式来获得我正在寻找的输出？

<table class="table table-striped table-bordered table-hover table-condensed">  
 <tr ng-repeat-start="thing in app.things">
  <td>{{thing.label}}</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr ng-repeat-start="action in thing.actions">
  <td>{{thing.label}}</td>
  <td>{{action.label}}</td>
  <td>&nbsp</td>
 </tr>
 <tr ng-repeat-end ng-repeat="task in action.tasks">
  <td>{{thing.label}}</td>
  <td>{{action.label}}</td>
  <td>{{task.label}}</td>
 </tr>
 <tr ng-repeat-end></tr></tr>
</table>

Answer 1

第一个选项 - 使用CSS:

.table-striped > tbody > tr:nth-child(odd) > td {
    background-color: #000;
}

.table-striped > tbody > tr:nth-child(even) > td {
    background-color: #F00;
}

第二个选项 - 使用CSS和Angular JS使用ng-class-odd="odd"和ng-class-even="even"为每个tablerow添加一个css类,例如:

 <tr ng-repeat-start="action in thing.actions" ng-class-odd="odd" ng-class-even="even">
      <td>{{thing.label}}</td>
      <td>{{action.label}}</td>
      <td>&nbsp</td>
 </tr>

而你的CSS添加奇数和偶数类,例如:

.odd { background-color: #000; }
.even { background-color: #F00; }

我希望能帮助你.