Lawrence V. Lawrence V. - 2 months ago 7
AngularJS Question

Angular ng-repeat, content outside of element

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

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