CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Rezenalize
Rezenalize

Reputation: 59

AngularJS using ng-repeat twice in a table

This problem comes from the AngularJS.org tutorial We have created a table with this code:

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

That gives us a 1 row table. The extra point challenge is to make an 8x8 table using an additional ng-repeat. I have tried several times in different ways to create 7 additional columns by adding an ng-repeat but I almost always end up with a 9th row of code instead of data.

BTW, there are actually no points earned; I just want the knowledge.

Upvotes: 1

Views: 2565

Answers (2)

Anyuta Krasnoshchok
Anyuta Krasnoshchok

Reputation: 11

If this problem still exists - here are two variants of filling the table - row by row and column by column (from 1 to 8). Use nested directive ng-repeat in <tr> and <td>

Row-by-row:

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

Column-by-column:

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

Upvotes: 1

Chrillewoodz
Chrillewoodz

Reputation: 28368

This would create an 8x8 table using nested ng-repeat:

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

Upvotes: 2

Related Questions