Angular ng-repeat, content outside of element

Question

In my source code, I have the following HTML block:

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

Currently, focusedTeamMembers has 3 elements.

However, after angular is through with it, the following code is displayed by my browser:

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

Could anyone explain why the "sample text" is being displayed outside of the element marked with "ng-repeat", and how to make it within the <tr> elements?

Additional information: If inside the "ng-repeat" element I put in {{this.focusedTeamMembers}}, the JSON for the object is displayed, so I am fairly sure the issue isn't with the variable not existing or being not defined.

Answer 1

This is probably the browser's fault, not Angular's. You have supplied invalid markup in that the only elements valid inside a <tr> is a <td> or <th> . Anything else, like your sample text, gets moved to outside the table by the browser trying to be helpful and correct your invalid markup.

If you just add in a single <td> for now, that should be enough to get started:

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