How to loop multiple Table TH in AngularJS

Question

<table class="table table-bordered">
<thead>
  <tr>
     <th></th>
     <th colspan="3" ng-repeat="d in $ctrl.otherdata">{{d.name}}</th>
   </tr>
   <tr>
     <th>User ID</th>
     ***** want to loop following 3 th***** 
     <th>ABC</th>
     <th>XYZ</th>
     <th>PQR</th>
    ***************************************
   </tr>

</thead>
<tbody>
  <tr ng-repeat="data in $ctrl.somedata">
     <td>{{data.name}}</td>
     <td>{{data.x}}</td>
     <td>{{data.y}}</td>
     <td>{{data.z}}</td>

   </tr>

</tbody>
</table>

Is it possible to loop following 3 th in ng-repeat based on length of $ctrl.otherdata?

<th>ABC</th>
<th>XYZ</th>
<th>PQR</th>

I tried but look like it is against web standard, I tried using DIV but look like it is not possible in table so any other alternative ?

Check attached image : this is what i am looking for throw loop using angular js

Asif Aminur Rashid · Accepted Answer · 2018-06-13 13:18:56Z

3

This should work -

<table class="table table-bordered">
<thead>
  <tr>
     <th></th>
     <th colspan="3" ng-repeat="din $ctrl.otherdata">{{d.name}}</th>
   </tr>
   <tr>
      <th>User ID</th>
      <th ng-repeat-start="x in $ctrl.otherdata">ABC</th>
      <th>XYZ</th>
      <th ng-repeat-end>PQR</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="data in $ctrl.somedata">
      <td>{{data.name}}</td>
      <td>{{data.x}}</td>
      <td>{{data.y}}</td>
      <td>{{data.z}}</td>

    </tr>

  </tbody>
</table>

answered Jun 13, 2018 at 13:18

Asif Aminur Rashid

3707 silver badges15 bronze badges

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

2 Comments

Nirmal Goswami Over a year ago

Excellent ! Great Answer ! Thank You !

Asif Aminur Rashid Over a year ago

Glad that it helped :)

Collectives™ on Stack Overflow

How to loop multiple Table TH in AngularJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related