具有嵌套 ng-repeat 条带行的引导表答案

【问题标题】：Bootstrap table with nested ng-repeat striped-rows具有嵌套 ng-repeat 条带行的引导表
【发布时间】：2023-04-01 21:00:01
【问题描述】：

我有一个应该显示条纹行的表，但由于我嵌套了 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>

【问题讨论】：

查看这个答案。 How to Assign Alternate Class To Rows
最简单的答案：在ng-repeat-end 行上使用ng-if="false"。请参阅下面的答案。

标签： angularjs twitter-bootstrap

【解决方案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; }

希望对你有帮助。

【讨论】：

使用你的建议并没有给我我期望的输出。见这里plnkr.co/edit/3pqsccyOMGMPW0pxD5mc?p=preview

【解决方案2】：

这实际上不是一个角度问题，而是一个 css 问题。如果这是您必须制作表格的方式，我将不得不质疑您的数据结构。但是您可以做的是将所有分组的行放入 tbody 标记中，然后创建一些自定义样式以在 tbody 上应用条纹。删除 table-striped 类，然后您可以执行以下操作：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案5】：

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

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

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

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

【讨论】：