[英]Angular ng-repeat, content outside of element
In my source code, I have the following HTML block: 在我的源代码中,我具有以下HTML块:
<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. 当前,focusedTeamMembers具有3个元素。
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? 谁能解释为什么“示例文本”显示在标有“ ng-repeat”的元素之外,以及如何在<tr>
元素内显示它?
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. 附加信息:如果在{{this.focusedTeamMembers}}中放入的“ ng-repeat”元素中,则显示该对象的JSON,因此,我很确定问题不在于变量不存在或未定义。
This is probably the browser's fault, not Angular's. 这可能是浏览器的问题,而不是Angular的问题。 You have supplied invalid markup in that the only elements valid inside a <tr>
is a <td>
or <th>
. 您提供了无效的标记,因为<tr>
内唯一有效的元素是<td>
或<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: 如果您现在仅添加一个<td>
,那应该足以开始使用:
<h3> Players </h3>
<table class="popup-winloss-table">
<tbody >
<tr ng-repeat="player in focusedTeamMembers">
<td>
sample text
{{player}}
</td>
</tr>
</tbody>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.