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

问题

I have the following code: Code on Plnkr

I am trying to use ng-repeat within a table. But that doesnt work. Whereas the same code works for list <li>

Here is a snippet of the same.

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

Is it incorrect to use ng-repeat within <tr>. How could i get the table usage right.

回答1:

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

So the root cause is that you miss a <td> or <th> element inside your <tr> element

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

回答2:

As you building a table with the ng-repeat, you should specify the content of each row cells, with the td tag like this:

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

回答3:

Yeah, checked on the plunker,

You need to remember to put in the <td> into the <tr>. <td> is display element and <tr> is structural.

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

来源：https://stackoverflow.com/questions/28525986/ng-repeat-not-working-with-table-tr-but-works-with-list-li