Ng-repeat-start vs ng-repeat value

Question

I am trying to understand the meaning 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 thing can be achieved 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 meaning of ng-repeat-start .? Thanks.

Answer 1

The meaning of these two directives is similar: they repeat the HTML tags. The only difference is that with ng-repeat-start you can repeat several tags, starting with the tag with ng-repeat-start and ending with ng-repeat-end .

For example, you have the following code:

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

So now we can add 2 directives for this 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 only the div with the ng-repeat directive is repeated, but in the second case your div repeated.

You can see the Demo and play with it:

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

Answer 2

I thought I would add my answer, since no one raised a very important reason for these directives to be available. ng-repeat will not work correctly in certain scenarios when using html tables. Using ng-repeat-start is the only way to perform certain actions.

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> 

Pay attention to ng-repeat-end , and then to another regular ng-repeat . This ends the ng-repeat-start mapping, but initiates another repeat in the customers array, since we are still in the original ng-repeat-start scope when ng-repeat-end called, we still have access to the group object.

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

Answer 3

The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag that it defined) up to and including the final HTML tag where ng-repeat-end is located