javascript - Angular ng-repeat，元素外的内容

Question

在我的源代码中，我有以下 HTML block :

<h3> Players </h3>
    <table class="popup-winloss-table">
        <tbody >
            <tr ng-repeat="player in focusedTeamMembers">
                sample text
                {{player}}
            </tr>
        </tbody>
    </table>

目前，focusedTeamMembers 有 3 个元素。

但是，在angular完成之后，我的浏览器显示了以下代码:

<h3> Players </h3>
sample text
<table class="popup-winloss-table">
   <tbody>
      <!-- ngRepeat: player in focusedTeamMembers -->
      <tr ng-repeat="player in focusedTeamMembers" class="ng-scope"></tr>
      <!-- end ngRepeat: player in focusedTeamMembers -->
      <tr ng-repeat="player in focusedTeamMembers" class="ng-scope"></tr>
      <!-- end ngRepeat: player in focusedTeamMembers -->
      <tr ng-repeat="player in focusedTeamMembers" class="ng-scope"></tr>
      <!-- end ngRepeat: player in focusedTeamMembers -->
   </tbody>
</table>

谁能解释为什么“示例文本”显示在标有“ng-repeat”的元素之外，以及如何在 <tr> 中显示它？元素？

附加信息:如果在我放入 {{this.focusedTeamMembers}} 的“ng-repeat”元素内，会显示对象的 JSON，所以我相当确定问题不在于变量不存在或未定义。

Answer 1

这可能是浏览器的错，而不是 Angular 的错。您提供了无效标记，因为在 <tr> 中唯一有效的元素是 <td>或 <th> .其他任何内容(例如您的示例文本)都会被浏览器移到表格之外，以试图提供帮助并更正您的无效标记。

如果您只添加一个 <td>现在，这应该足以开始:

<h3> Players </h3>
<table class="popup-winloss-table">
    <tbody >
        <tr ng-repeat="player in focusedTeamMembers">
            <td>
                sample text
                {{player}}
            </td>
        </tr>
    </tbody>
</table>