How to loop multiple tables in AngularJS HTML?-CodePudding

How to loop multiple tables in angularjs?

I have HTML like

<div ng-repeat="stuff in moreStuff">
  <table>
   <h1>stuff.name</h1>

   <tr ng-repeat="car in cars">
<td>
 <div>{{car.name}}
</td>
   stuff
  </table>
</div>

but its only rendering 1 table when i have 3 stuff in moreStuff

CodePudding user response：

You should check your html sintax.

<div ng-repeat="stuff in moreStuff">
  <table>
    <h1>stuff.name</h1>

    <tr ng-repeat="car in cars">
      <td>
        <div>{{car.name}}
      </td>
    stuff
  </table>
</div>

You should close the tr and div it using the close marker </> tag, like this

<div ng-repeat="stuff in moreStuff">
  <table>
    <h1>stuff.name</h1>

    <tr ng-repeat="car in cars">
      <td>
        <div>{{car.name}}</div>
      </td>
    </tr>
    .
    .
    .

Hope this work Regards

CodePudding user response：

Your tr and div tags are not closed which is causing this issue so changing your html to

<div ng-repeat="stuff in moreStuff">
  <table>
   <h1>stuff.name</h1>
   <tr ng-repeat="car in cars">
      <td>
        <div>{{car.name}}</div> <!-- div tag should be closed here -->
       </td>
    </tr><!--tr tag should be closed-->
   stuff
  </table>
</div>

should fix the issue