Angularjs 具有嵌套ng重复条带行的引导表

我有一个表，它应该显示条带行，但是由于我有嵌套的ng重复，所以我的输出有一组颜色相同的行，而不是条带行。有没有办法得到我想要的结果

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

{{thing.label}
{{thing.label}
{{action.label}
 
{{thing.label}
{{action.label}
{{task.label}

这不是一个真正的角度问题，而是一个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;
}

{{thing.label}
{{action.label}
 
{{thing.label}
{{action.label}
 
{{thing.label}
{{action.label}
{{task.label}
{{thing.label}
{{action.label}
{{task.label}
t正文：第n个孩子（奇数）{
背景色：#F2F2；
}

第一个选项-使用CSS：

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

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

第二个选项-使用CSS和角度JS使用

ng class odd=“odd”

和

ng class偶数=“偶数”

向每个表行添加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>

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

---

希望能对您有所帮助。

尝试添加

tbody

元素，如

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

---

除了Tiago answer-您必须从table类中删除“table striped”，因为它覆盖了ng类奇数/ng类偶数CSS类

ng repeat end行导致了条带问题

您需要AngularJs执行重复操作的行，但不希望browser/Bootstrap/css使用它来替换样式

因此，只要在Angular使用后将其从表中删除即可：

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

查看此答案。最简单的答案是：在

ng repeat end

行中使用

ng if=“false”

。请看下面我的答案。使用您的建议并没有给我预期的结果。看这里

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