Angular.js ng-repeat across multiple tr's

javascript

angularjs

responsive-design

best-practices

byNikita Barsukov·Jan 26, 2025

Applying nested ng-repeat is an efficient method to display items in matrix forms across multiple <tr>s. Here, each sub-array illustrates a row and each element inside represents the cells.

<table>
  <!-- Start the Matrix Revolution -->
  <tr ng-repeat="row in matrix">
    <td ng-repeat="cell in row">
      <!-- There is no spoon (or in this case, cell) -->
      {{ cell }}
    </td>
  </tr>
</table>

$scope.matrix = [
  ['1.1', '1.2'], // Neo and Trinity (Row 1)
  ['2.1', '2.2'], // Morpheus and Cypher (Row 2)
];

Using this compact structure, every row and its cells are rendered, ensuring perfect display over multiple <tr> elements.

Step up with ng-repeat-start and ng-repeat-end

When you need to repeat multiple elements, ng-repeat-start and ng-repeat-end directives offer a powerful solution. These directives can extend over complex templates, keeping your HTML clean and semantically spot on.

<table>
  <!-- Each item gets its own tbody -->
  <tbody ng-repeat="item in items">
    <tr ng-repeat-start="detail in item.details">
      <!-- Display the name in this row -->
      <td>{{ detail.name }}</td>
    </tr>
    <tr ng-repeat-end>
      <!-- And the value in this row -->
      <td>{{ detail.value }}</td>
    </tr>
  </tbody>
</table>

These directives bridge the start and end points within the iteration process, making the management of complex table structures much simpler.

Groups that stick together with multiple tbody tags

Multiple <tbody> tags in your table provide a natural divide between data groups without the need for additional constraints. Coupled with the ng-repeat directive, this opens up possibilities for dynamic and sophisticated table layouts.

<table>
  <!-- Each dataGroup gets its own tbody -->
  <tbody ng-repeat="group in dataGroups">
    <!-- Who run the world? Rows. -->
    <tr ng-repeat="item in group">
      <!-- Oh look, they have values too! -->
      <td>{{ item.name }}</td>
      <td>{{ item.value }}</td>
    </tr>
  </tbody>
</table>

This way, even complex data structures are logically managed and effectively executed.

Turning tables responsive

ng-repeat coupled with some CSS magic and jQuery tricks, can turn mere tables into responsive masterpieces. For iterations that have hidden or dynamic content, implementing ng-if with rowspan will ensure flexible and smooth layouts.

Validation keeps the chaos in check

The cornerstone of web development is always valid HTML. Tools like the W3C HTML validator can ensure the integrity of your markup. This becomes especially crucial when using Angular directives to make sure that they fall in line with HTML standards for widespread cross-browser compatibility.

Tipping our hats to the history

The ng-repeat directive for repeating over multiple elements was an idea implemented by Igor Minar and Miško Hevery. Resources like John Lindquist's screencasts and Angular documentation even delve into advanced usage of ng-repeat.

explain-codes / Javascript / Angular.js ng-repeat across multiple tr's

Linked

Angularjs ng-repeat with no HTML element



Way to ng-repeat defined number of times instead of repeating over array?



Using ngIf without an extra element in Angular 2



Is it valid to use more than one thead or tfoot element in a table?



What is the correct syntax of ng-include?

