Difference between ng-repeat and collection-repeat in angularjs?

Issue

i got a little bit confusion about ng-repeat and collection-repeat

ng-repeat

<ion-item ng-repeat="item in items" >
    ...
</ion-item>

collection-repeat

<ion-item collection-repeat="item in items">
    ...
</ion-item>

the above both lines are doing well and same.

Please let me know if any difference there. also i have 1000 items, so which one is better for this scenario? and how's the rendering speed and what about the performance status ?

Solution

Collection repeat is Ionic's buttery-smooth solution for scrolling huge lists. collection-repeat can be used for large list of items and it has high performance when process huge data set.It renders into the DOM only as many items as are currently visible.This means that on a phone screen that can fit eight items, only the eight items matching the current scroll position will be rendered.

ngRepeat part of the angular Core module. The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

Based on the use case you can use any of the options. However, if you use ionic framework for mobile then I would suggest to go for Collection repeat.

Further, If you need to use ng-repeat, it is recommend to process data in the server side and request part by part. This way you can expect high performance and less processing in the client side. Another option is store the large data set in the client browser and then process data using that data set.

Answered By - kds