AngularJS ng-repeat colspan rowspan issue

Question

<table border=1>
 <thead>
   <tr>
      <th>Group</th>
      <th>Status</th>
     <th>Name</th>
     <th>Gender</th>          
   </tr>
 </thead>    
 <tbody ng-repeat="group in groups">
   <tr>
     <td rowspan="3">{{group.name}}</td>  
     <td rowspan="3">{{group.status}}</td>        
   </tr>
   <tr ng-repeat="member in group.members">
     <td>{{ member.name }}</td>
     <td>{{ member.gender }}</td>
   </tr>
 </tbody>
</table>

The above code gives the output as below:

enter image description here

I need to make the Status column the 4th column instead of the current 2nd i.e appear after the Gender column. I tried using ng-repeat-start by adding one more tr having the status td but it comes as another row

JS-Bin for the same

If you absolutely need to keep table tag, likely easiest to create a directive to generate the html yourself. Otherwise might consider using a <div> structure which would be easier to construct — charlietfl
– charlietfl, Commented Apr 26, 2015 at 15:22

xsh.7 · Accepted Answer · 2015-04-26 16:25:31Z

1

Using ng-if checking the $index using modulo (%) for the columns with a rowspan might do the trick: jsbin.com/jaxuvavaba

answered Apr 26, 2015 at 16:25

xsh.7

6,2701 gold badge25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS ng-repeat colspan rowspan issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related