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 ?

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 ?

• javascript
• angularjs

• 3 ionicframework./docs/api/directive/collectionRepeat might help – Satpal Commented Mar 16, 2015 at 10:11

5 Answers 5

collection-repeat is not part of angularjs. As far as I can see it's ing from Ionic Framework. As documentation says collection-repeat was created to be used instead of ng-repeat as it might work better with large number of items.

collection-repeat allows an app to show huge lists of items much more performantly than ng-repeat

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 remend 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.

In case of 1000 elements I would strongly remend the collection-repeat. It's more flexible, and it renders as many items from collection as many can fit the screen. the rest is loaded dynamically, you can even use 200k collection and it will go smooth as well. ng-repeat renders the collection items until it's done, so it will give you much worse performance.

So collection-repeat it is my friend.

Good luck with your development!

Note: collection-repeat is not a part of angular core, look here for more : http://ionicframework./docs/api/directive/collectionRepeat/

From what I'm understand is ng-repeat is suitable to use for small numbers of item and collection-repeat is very suitable to use for huge numbers of item. Its actually about the performance when it es to view/render in a device. For more understanding you can see this video, it really help me to understand both of it.

In Simple Word - Ionic has a collection-repeat directive that you can use, instead of ng-repeat, when you need to display very large lists.

How it works?(Deep)

The module is divided into two ponents, $repeatFactory (a service where helper functions are defined) and collectRepeat (a directive where most of the logic lives).

The most important takeaway from the factory is the repeatManager method. It is the contructor that is instantiated at the beginning of the link function of the directive and is responsible for maintaining the state of the scrolling view.

On creating a new instance of repeatManager, it's also necessary to generate a new object (or map) to provide as reference for all the items that have already been transcluded, rendered, and whose scope has been updated. The enclosing parent element must also be registered so that we can later change it's height to the height of all the items in the collection.

Next, a watch is set on the collection with an anonymous function set to be invoked whenever the collection changes. This is where the bulk of the logic resides. It's split into three steps.

• Transclude and render the first element of the collection so that the height and other properties of each individual item may be registered, the height of the parent div adjusted, and the size of the viewport calculated
• With the size of the viewport determined, loop over and render the n number of items that will fit inside the viewport (plus a few extra for smoothness).
• Set a 'scroll' event listener on .scroll-content to return the scrollHeight of the first element of the collection and render only the necessary elements.

There are a few additional tidbits (also known as ments) available in the code below. It should help alleviate some confusion if you have trouble following the above synopsis. The module is also available on github.

GitHub

Differences - Working Example

Code Here