Matteo Bandiera

Web Developer

ng-repeat-start

AngularJS, ng-repeat-start directive

- by

The ng-repeat directive repeats a single top-level element and its contents for each object or property that it process. There are times, however, when you need to repeat multiple top-level elements for each data object.

Ng-repeat-start comes in help

Since AngularJS 1.2, ng-repeat received two sibling directives named ng-repeat-start and ng-repeat-end. With these we can specify the start and the end of a ng-repeat loop.

Let’s implement an example.

<table>
  <tbody>
    <tr ng-repeat-start="todo in todos">
      <td>This is item #{{$index}}</td>
    </tr>
    <tr>
     <td>{{todo.action}}</td>
    </tr>
    <tr ng-repeat-end="todo in todos">
      <td>{{$todo.complete ? "Complete" : "Not complete"}}</td>
    </tr>
  </tbody>
</table>

The above code will generate the desired output. You can see a demo here.

See the Pen Angular | ng-repeat-start by Matteo Bandiera (@matteodesmo) on CodePen.0