ng-repeat 不适用于 table <tr> 但适用于列表 <li>

Question

我有以下代码：Code on Plnkr

我正在尝试在 table 中使用 ng-repeat。但这不起作用。而相同的代码适用于列表 <li>

这是相同的片段。

<h1>Using list</h1>
<ul>
  <li ng-repeat="item in sampleArray">{{item}}</li>
</ul>
<h1>Using Table</h1>
<table>
    <tr ng-repeat="item in sampleArray">{{item}}</tr>
</table>

在 <tr> 中使用 ng-repeat 是否不正确？我怎样才能正确使用 table。

Answer 1

每 W3C HTML Table definition

Tables are defined with the tag.

Tables are divided into table rows with the tag.

Table rows are divided into table data with the tag.

A table row can also be divided into table headings with the tag.

所以根本原因是您在 <tr> 元素

中遗漏了 <td> 或 <th> 元素

<tr ng-repeat="item in sampleArray"><td>{{item}}</td></tr>

Answer 2

是的，检查了 plunker，

你要记得把<td>填入<tr>。 <td> 是显示元素，<tr> 是结构元素。

<tr ng-repeat="item in sampleArray"><td>{{item}}</td></tr>

Answer 3

当您使用 ng-repeat 构建 table 时，您应该使用 td 标签指定每行单元格的内容，如下所示：

<table>
  <tr ng-repeat="item in sampleArray">
    <td>{{$index}}</td>
    <td>{{item}}</td>
  </tr>
</table>

ng-repeat 不适用于 table <tr> 但适用于列表 <li>

ng-repeat not working with table <tr> but works with list <li>

javascript

angularjs

angularjs-ng-repeat