Question

以下代码段仅显示我页面中的thead：

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

但是，如果我要注释table代码和thead元素，并保留tbody，则表格正常显示。

我在这里缺少什么概念？

Answer 1

此处不需要div，如果您想为每一行设置ID，您可以使用ngAttr指令

所以你的<tbody>将是，

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

Answer 2

<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"也已删除，因为我们无法在页面上显示相同的ID。

Angular JS：ng-repeat不在表标记内呈现

2 个答案: