angularjs - 具有嵌套 ng-repeat strip 行的 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; }

我希望能帮助你。