Angular JS table creation issue

Question

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

Without knowing angular, you put the ng-repeat in the <tr> tag, which would logically create 8 rows with a table header in it. Instead try putting the code in the header cell: <th ng-repeat="k in [0,1,2,3,4,5,6,7,8]"></th> — Aventuris
– Aventuris, Commented Jan 28, 2015 at 3:28
@SimonBambey Thank you very much. I am new to angular and that is why I made mistake. — Ashish
– Ashish, Commented Jan 28, 2015 at 3:40

levi · Accepted Answer · 2015-01-28 03:28:37Z

4

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>

answered Jan 28, 2015 at 3:28

levi

22.8k7 gold badges79 silver badges76 bronze badges

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

2 Comments

Aventuris Over a year ago

This would create 8 rows of headers with 8 cells each. I believe he is looking for only one header row.

Fernando Basso Over a year ago

They say in here “using an additional ng-repeat”. I understand a/an to mean one in this sentence. I could not make it without using two additional ng-repeat. It doesn't seem possible with a single one (or I missed some basic point).

abheist · Accepted Answer · 2016-01-31 06:33:43Z

2

<table>
    <tr>
        <th ng-repeat="i in [0,1,2,3,4,5,6,7]">Column: {{i}}</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}},{{j}}]
        </td>
    </tr>
</table>

answered Jan 31, 2016 at 6:33

abheist

1571 silver badge6 bronze badges

Comments

Edward J Beckett · Accepted Answer · 2016-09-28 23:46:55Z

0

Read carefully...

"Extra points: Try and make an 8x8 table using an additional ng-repeat..."

<html lang="en" ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body>
   <table>
     <tr><th colspan="8">8x8 Table</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}},{{j+1}}]</td>
     </tr>
    </table>
  </body>
</html>

edited Sep 28, 2016 at 23:46

answered Sep 28, 2016 at 23:33

Edward J Beckett

5,1402 gold badges44 silver badges41 bronze badges

Comments

Gem H · Accepted Answer · 2017-03-29 23:40:17Z

0

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

answered Mar 29, 2017 at 23:40

Gem H

1

Collectives™ on Stack Overflow

Angular JS table creation issue

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related