Angular JS: ng-repeat does not render within table tag

Question

The following code snippet displays only the thead in my page:

<table>
    <thead>
        <tr id="table-heading">
            <th>Team</th>
            <th>Played</th>
            <th>Won</th>
            <th>Drawn</th>
            <th>Lost</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <div ng-repeat="(tableKey, tableRow) in tableObject.table">
            <tr id="table-body">
                <td>{{tableKey}}</td>
                <td>{{tableRow.gamesPlayed}}</td>
                <td>{{tableRow.gamesWon}}</td>
                <td>{{tableRow.gamesDrawn}}</td>
                <td>{{tableRow.gamesLost}}</td>
                <td>{{tableRow.gamesPoints}}</td>
            </tr>
        </div>
    </tbody>
</table>

However, if I am to comment out the table tag, and the thead element, and leave the tbody in, the table-body displays fine.

What concept around tables am I missing here?

Is that valid HTML, maybe run it through the validator, I suspect that DIV in the tbody is invalid. You can put the ng-repeat directly on the tr if you want. — TheLazyChap
– TheLazyChap, Commented Jun 16, 2015 at 3:37
Yes, you are right, moving the ng-repeat to the tr resolved this, see the answer below — DJ180
– DJ180, Commented Jun 16, 2015 at 4:09
I belive this wont render since this is broken html, under tbody you should have imidiatly a table tag tr — Tomas Katz
– Tomas Katz, Commented Jun 28, 2017 at 7:55

Arulkumar · Accepted Answer · 2015-06-16 04:07:48Z

2

No need of div here and if you want to set id for each row, you can use ngAttr directive

so your <tbody> will be,

<tbody>
    <tr ng-attr-id = "{{ 'tablebodyObj_' + tableRow.index }}" 
        ng-repeat = "(tableKey, tableRow) in tableObject.table">
        <td>{{tableKey}}</td>
        <td>{{tableRow.gamesPlayed}}</td>
        <td>{{tableRow.gamesWon}}</td>
        <td>{{tableRow.gamesDrawn}}</td>
        <td>{{tableRow.gamesLost}}</td>
        <td>{{tableRow.gamesPoints}}</td>
    </tr>
</tbody>

answered Jun 16, 2015 at 4:07

Arulkumar

13.3k14 gold badges51 silver badges76 bronze badges

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

Comments

Shamil Yakupov · Accepted Answer · 2015-06-16 03:26:37Z

1

<table>
    <thead>
        <tr id="table-heading">
            <th>Team</th>
            <th>Played</th>
            <th>Won</th>
            <th>Drawn</th>
            <th>Lost</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="(tableKey, tableRow) in tableObject.table">
            <td>{{tableKey}}</td>
            <td>{{tableRow.gamesPlayed}}</td>
            <td>{{tableRow.gamesWon}}</td>
            <td>{{tableRow.gamesDrawn}}</td>
            <td>{{tableRow.gamesLost}}</td>
            <td>{{tableRow.gamesPoints}}</td>
        </tr>
    </tbody>
</table>

id="table-body" also removed because we cannot have same ids on page.

answered Jun 16, 2015 at 3:26

Shamil Yakupov

5,4794 gold badges19 silver badges22 bronze badges

2 Comments

DJ180 Over a year ago

What do you mean by the same ids on page?

Shamil Yakupov Over a year ago

"The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id."

Collectives™ on Stack Overflow

Angular JS: ng-repeat does not render within table tag

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related