Significance of ng-repeat-start vs ng-repeat

Question

I am trying to understand the significance of ng-repeat-start over ng-repeat. The angular documentation provides the following example for ng-repeat-start

<header ng-repeat-start="item in items">
  Header {{ item }}
</header>
<div class="body">
  Body {{ item }}
</div>
<footer ng-repeat-end>
  Footer {{ item }}
</footer>

But the same can be achived using ng-repeat,

<div ng-repeat="item in items">
  <header>
    Header {{ item }}
  </header>
  <div class="body">
    Body {{ item }}
  </div>
  <footer>
    Footer {{ item }}
  </footer>
</div>

Can someone explain the significance of ng-repeat-start.? Thanks.

Answer 1

I thought I'd add my answer, as no one touched on a very important reason for having these directives available. ng-repeat will not work correctly in certain scenarios when using html tables. Using ng-repeat-start is the only way to accomplish certain things.

Imagine you want to display your data like this using html tables:

And this is your data set:

groups = [
    {
        name: "Group 1",
        customers: [
            {id: 123, name: "Foo Inc.", state: "NJ"},
            {id: 234, name: "Bar Co.", state: "AZ"}
        ]
    },
    {
        name: "Group 2",
        customers: [
            {id: 345, name: "Baz LLC", state: "CA"}
        ]
    }
];

Using ng-repeat-start and ng-repeat-end you can do this:

<table>
    <tr>
        <th>ID</th>
        <th>Customer</th>
        <th>State</th>
    </tr>
    <tr ng-repeat-start="group in groups">
        <td colspan="3" style="text-align:center">{{group.name}}<td>
    </tr>
    <tr ng-repeat-end ng-repeat="customer in group.customers">
        <td>{{customer.id}}</td>
        <td>{{customer.name}}</td>
        <td>{{customer.state}}</td>
    </tr>
</table>

Notice the ng-repeat-end followed by another regular ng-repeat. This ends the matching ng-repeat-start but initiates another repeat on the customers array, since we are still in the original ng-repeat-start scope when calling ng-repeat-end, we still have access to the group object.

Keep in mind, this is a very trivial example, but as the table structure becomes more complicated, the only way to accomplish things like this is to use ng-repeat-start and ng-repeat-end

Answer 2

The significance of these two directives is similar: they repeat HTML-tags. The difference is only that with help of ng-repeat-start you could repeat few tags starting from tag with ng-repeat-start and finishing by ng-repeat-end.

For example you have next code:

<div>
  Item # {{item}}
</div>
<div>Whether you repeat me?</div>

So now we can add 2 directives for these code.
With ng-repeat:

<div ng-repeat="item in items">
  Item # {{item}}
</div>
<div>
  This code will not be repeated
</div>

With ng-repeat-start and ng-repeat-end:

<div ng-repeat-start="item in items">
  Item # {{item}}
</div>
<div ng-repeat-end="">This code will be repeated</div>

So now you can see that in the first case just div with ng-repeat directive repeats, but in the second case both your divs will be repeated.

You can see Demo and play with it:

Demo: http://plnkr.co/edit/R778lWTABVF3Hy16CAca

Answer 3

The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it’s defined on) up to and including the ending HTML tag where ng-repeat-end is placed