CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Aman Singh Kamboj
Aman Singh Kamboj

Reputation: 565

Angularjs - add additional row inside a tr ng-repeat

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

I.e. display data of 1 row in two

Can't use ng-repeat-end

Upvotes: 7

Views: 9704

Answers (4)

pcloadletter
pcloadletter

Reputation: 21

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.

Upvotes: 2

Aman Singh Kamboj
Aman Singh Kamboj

Reputation: 565

<tr ng-repeat-start=x in y>
  <td>selectbox here
<tr\>

<tr ng-repeat-end ng-if=somecondition>
  <td>label data <\td>
<\tr>

So now we have already used ng-repeat-end. Inside ng-repeat-end i have to display 2 rows for a single iteration.

<tr><td indexis1>selectbox<\td><\tr>
 <tr><td indexis2>label primary<\td><\tr>
<tr><td indexis2>label secondary<\td><\tr>

This is a rough code snippet and there are numerous td already present in code.

Upvotes: 0

anandaravindan
anandaravindan

Reputation: 2541

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>

Upvotes: 1

New Dev
New Dev

Reputation: 49590

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

Upvotes: 21

Related Questions