Loop...">

Angularjs - add extra line inside tr ng-repeat

Ng-repeat is present in the table row

My request is as follows:

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

Now that the data object is looping on <tr>. I have a scenario where I have to display data from 1 row to 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

those. display data 1 row in two

You cannot use ng-repeat-end

+4
source share
4 answers

1) You can combine ng-ifwith ng-repeatand 2) ng-repeatsupports multiple elements with ng-repeat-startand 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

+16
source

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

New Dev , , .

n- "/ ", .

25 , ​​: (($ 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>

. , ", ​​" ( ), .

+1
<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 lines for one 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 piece of code, and there is a lot of td in the code.

0
source

All Articles