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

admin管理员组

文章数量:1279016

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.

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.

• javascript
• angularjs
• angularjs-ng-repeat

Share Improve this question Follow asked Feb 15, 2015 at 12:21 jsbishtjsbisht 9,67988 gold badges5555 silver badges6060 bronze badges 1

• You might want to put in some <td> in the <tr>: <tr ng-repeat=""><td>{{item}}</td></tr> – Callum Linington Commented Feb 15, 2015 at 12:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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>

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>

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>

本文标签： javascriptngrepeat not working with table lttrgt but works with list ltligtStack Overflow