create table with AngularJS ng-repeat

Question

I was trying to use ng-repeat to create a table, but I couldn't figure out how to get it to work. My best attempt was the below.

<table ng-repeat="j in [0,1,2,3,4,5,6,7]">
  <tr>
    <th>
      Header {{j+1}}
    </th>
  </tr>
  <tr ng-repeat="i in [0,1,2,3,4,5,6,7]">
    <td>
      {{i+1}} , {{j+1}}
    </td>
  </tr>

</table>

any ideas?

do you wanted to create multiple table? and for what j & i stands for. do explain whole context to get help from people.. — Pankaj Parkar
– Pankaj Parkar, Commented Apr 3, 2016 at 17:41

Sami Triki · Accepted Answer · 2016-04-03 17:48:13Z

1

So to begin with, the ng-repeat attribute is on the table, meaning that you are repeating this element as many times as there are entries in your array. Knowing that "tr" stands for the rows, and "td" for different sections in your rows.

You could try:

<table>
  <tr><!--this is your header row -->
    <th>
      Header {{j+1}}<!-- this is a header section, you can repeat here or use it as a title -->
    </th>
  </tr>
  <tr ng-repeat="j in [0,1,2,3,4,5,6,7]"><!-- repeat the rows -->
    <td ng-repeat="i in [0,1,2,3,4,5,6,7]"><!-- repeat the sections -->
      {{i+1}} , {{j+1}}<!-- here you can display i, j whatever else -->
    </td>
  </tr>

</table>

answered Apr 3, 2016 at 17:48

Sami Triki

4083 silver badges7 bronze badges

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

1 Comment

Charbel Over a year ago

ok, I needed something with headers showing: so I added <th ng-repeat="j in [0,1,2,3,4,5,6,7]" style="padding = 10px;"> Header {{j+1}} </th>

Collectives™ on Stack Overflow

create table with AngularJS ng-repeat

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related