Angularjs - add additional row inside a tr ng-repeat

Question

Ng-repeat is present on a table row

My query is how can we achieve the following:

<tr ng-repeat="x in y">
     Looping here....
 </tr>

Now as data object is looping on a <tr>. I have a scenario where I have to display data of 1 row in two <tr>.

Eg.

Table

• Data1 data1.2 data1.3 data1.4
• Data2 data2.2
• Data2b data2.3 data2.4

• Data3 data3.2 data3.3 data3.4

• Data4 data4.2 data4.3

I.e. display data of 1 row in two

Can't use ng-repeat-end

Answer 1

1) You can combine ng-if with ng-repeat and 2) ng-repeat supports multi-element with ng-repeat-start and ng-repeat-end:

<tr ng-repeat-start="item in [1, 2, 3, 4, 5, 6]">
  <td>{{item}}</td><td>something else</td>
</tr>
<tr ng-if="item % 2 === 0" ng-repeat-end>
  <td colspan="2">-even</td>
</tr>

Demo

Answer 2

I modified the solution New Dev provided for my purposes & thought I'd share since it really saved me.

I needed a solution to repeat my table header row after every nth row as an alternative to a "frozen/fixed upon scrolling" header row, which just isn't feasible for my use case.

In this example, I'm showing the header row after every 25 rows, but not if it's going to be the last row in the table: (($index+1) != itemCollection.length).

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Column Header 1 - Value</th>
      <th>Column Header 2 - Index</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat-start="item in itemCollection">
      <td>{{item}}</td>
      <td>{{$index}}</td>
    </tr>
    <tr ng-repeat-end="" ng-if="(($index+1) % 25 === 0) && ($index+1) != itemCollection.length">
      <th>Column Header 1 - Value</th>
      <th>Column Header 2 - Index</th>
    </tr>
  </tbody>
</table>

Check out the modified demo. For simplicity's sake, I used an inline collection, so the "not if it's going to be the last row in the table" logic isn't included (as you'll see with the unneeded column header at the very bottom), but you get the picture.

Answer 3

You need to repeat tbody instead of tr.

<tbody ng-repeat="x in y" >
  <tr>
    <td>{{X. row data}}</td>
    <td>{{X. row data 2}}</td>
  </tr>
  <tr>
    <td colspan="2">
      {{X. secondRowData}}
    </td>
  </tr>
</tbody>