Significance of ng-repeat-start vs ng-repeat - angularjs

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