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

我希望能帮助你。

Answer 2

这不是一个有角度的问题，这是一个CSS问题。如果这是你必须制作表的方式，我将不得不质疑你的数据结构。但是您可以做的是将所有分组的行放入tbody标记，然后创建一些自定义样式以在tbody上应用条带。删除表条带类，然后你可以这样做：

<tbody ng-repeat="action in thing.actions">
    <tr>
        <td>{{thing.label}}</td>
        <td>{{action.label}}</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>
        <td>{{thing.label}}</td>
        <td>{{action.label}}</td>
        <td>{{task.label}}</td>
    </tr>
</tbody>

tbody:nth-child(odd) {
    background-color: #f2f2f2;
}

Answer 3

除了Tiago回答 - 您必须从表类中删除“table-striped”，因为它会覆盖ng-class-odd / ng-class-even CSS类

Answer 4

尝试添加tbody元素，例如

<table class="table table-striped table-bordered table-hover table-condensed">  
 <tbody>
    <tr ng-repeat-start="thing in app.things">
     ....

并将此规则添加到CSS：

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

Answer 5

ng-repeat-end行导致条带问题。

你需要AngularJs的行来重复，但你不希望它用于浏览器/ Bootstrap / css来交替样式。

一旦Angular使用它，只需将其从表中删除：

<tr ng-repeat-end ng-if="false"></tr>

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

5 个答案: