twitter-bootstrap 带有嵌套 ng-repeat 条带行的引导表

Bootstrap table with nested ng-repeat striped-rows

提问by user3918569

I have a table for which should display striped rows, but since I have nested ng-repeats, my output has groups of rows colored the same instead of striped. Any way to get the output I'm looking for?

我有一个应该显示条纹行的表格，但是由于我嵌套了 ng-repeat，我的输出具有颜色相同的行组，而不是条纹。有什么方法可以获得我正在寻找的输出吗？

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

回答by Tiago Barreto

First Option- Using CSS:

第一个选项- 使用CSS：

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

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

Second Option- Using CSS and Angular JSuse the ng-class-odd="odd"and ng-class-even="even"to add a css class to each tablerow, for example:

第二个选项- 使用CSS 和 Angular JS使用ng-class-odd="odd"和ng-class-even="even"向每个表格行添加一个 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>

And your CSS add the odd and even class, for example:

并且您的 CSS 添加奇数和偶数类，例如：

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

I hope help you.

我希望能帮到你。

回答by Jordan Papaleo

This isnt really an angular question, it is a css question. I would have to question your data structure if this is the way you have to make tables. But what you can do is place all the grouped rows into a tbody tag then create a little custom styles to apply the stripe on tbody. Drop the table-striped class and then you could do something like this:

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

回答by eladc

In addition to Tiago answer - you must remove "table-striped" from the table class, because it overriding the ng-class-odd / ng-class-even CSS classes

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

回答by Sean

The ng-repeat-endrow is causing the stripe issue.

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

You need the row for AngularJs to do the repeating, but you don't want it for the browser/Bootstrap/css to alternate the styling.

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

So simply remove it from the table once Angular has used it:

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

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

回答by Calmont

Try to add tbodyelement, like

尝试添加tbody元素，例如

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

and add this rule to the CSS:

并将此规则添加到 CSS：

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