Bootstrap table with nested ng-repeat striped-rows

Question

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?

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

Check out this answer. [How to Assign Alternate Class To Rows](http://stackoverflow.com/questions/12179455/how-to-assign-alternate-class-to-rows-in-angular-js) — Zack Argyle, Aug 07 '14 at 22:33
Simplest answer: use `ng-if="false"` on the `ng-repeat-end` row. See my answer below. — Sean, Feb 09 '18 at 11:48

Tiago Barreto · Answer 1 · 2014-08-07T22:47:06.597

First Option - Using 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 JS use the ng-class-odd="odd" and ng-class-even="even" to add a css class to each tablerow, for example:

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

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

I hope help you.

Using your suggestion is not giving me the output I'm expecting. See here http://plnkr.co/edit/3pqsccyOMGMPW0pxD5mc?p=preview — user3918569, Aug 08 '14 at 14:25

Jordan Papaleo · Answer 2 · 2014-08-07T22:36:06.847

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:

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

score 1 · Answer 3 · answered Nov 11 '15 at 08:08

1

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

answered Nov 11 '15 at 08:08

eladc

243
2
6

score 0 · Answer 4 · edited Oct 28 '15 at 15:47

0

Try to add tbody element, like

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

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

edited Oct 28 '15 at 15:47

dubek

11,447
5
30
23

answered Oct 28 '15 at 15:11

Calmont

48
6

score 0 · Answer 5 · answered Feb 09 '18 at 11:45

The ng-repeat-end row is causing the stripe issue.

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.

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

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

Bootstrap table with nested ng-repeat striped-rows

5 Answers5