CODEWITHSUNDEEP
angularjs
DJ180
DJ180

Reputation: 19854

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

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?

Upvotes: 2

Views: 598

Answers (2)

Arulkumar
Arulkumar

Reputation: 13237

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>

Upvotes: 2

Shamil Yakupov
Shamil Yakupov

Reputation: 5469

<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.

Upvotes: 1

Related Questions