Ashish Ashish - 2 months ago 8
AngularJS Question

Angular JS table creation issue

I have just started learning Angular JS and I am trying to create an 8X8 table using ng-repeat. I am not able to get 8 table header. All the table header is coming in one column. Here is my code.

<table border="1px solid black">
<tr ng-repeat="k in [0,1,2,3,4,5,6,7,8]">
<th>
column
</th>
</tr>
<tr ng-repeat="i in [0,1,2,3,4,5,6,7,8]">
<td ng-repeat="j in [0,1,2,3,4,5,6,7,8]">
[{{i}},{{j}}]
</td>
</tr>
</table>


This is the output of my code. I am not sure why is that happening.

enter image description here

Answer

The ng-repeat should be in <th> not in <tr>. If not, you are creating 8 rows with 1 header and you want 1 row with 8 headers.

    <table border="1px solid black">
      <tr>
        <th ng-repeat="j in [0,1,2,3,4,5,6,7,8]">
          column
        </th>
      </tr>
      <tr ng-repeat="i in [0,1,2,3,4,5,6,7,8]">
        <td ng-repeat="j in [0,1,2,3,4,5,6,7,8]">
          [{{i}},{{j}}]
        </td>
      </tr>
    </table>
Comments