Fork me on GitHub

Angular-vs-repeat angular virtual scroll for ng-repeat

scroll it vertically  scroll it horizontally  scroll it in both directions Array size: 30 x {{items.collection.length}}

To show the contents check the checkbox above. Mind how the "actual elements in DOM" changes when you toggle the checkbox. The visibility of the content is controlled via ngShow directive.
{{item.text}} start
{{item.text}} end
{{item.text}}
Top offset:
Bottom offset:
{{item.text}}
{{item.text}}
{{item.text}}
{{item.text}}

The following example shows the performance benefits of using angular-vs-repeat

If you don't look under the hood both lists look exactly the same. On the left size the vs-repeat directive was used, whereas on the right side there is a plain regular ng-repeat. Above each of those lists the $digest cycle duration gauge is placed (updates every second) so you can see how many milliseconds it takes to run a $digest with and without vs-repeat.

Try with a 10 000 elements array size (using the form below, and be careful, note that the UI will stall for a significant amout of time). You can see that the $digest duration with vs-repeat stays on the same level (it actually depends on the container size), while the $digest duration on the right side (without vs-repeat) increases dramatically. Also note that each of those repeated elements consist of just two inputs and a binding, but if there were more complex elements inside, with other directives, watchers etc. the array size threshold for experiencing a 'laggy' UI would be much smaller.

[with vs-repeat] $digest duration: {{digestDuration}} milliseconds
a+b: {{foo.a + ' ' + foo.b}}
[without vs-repeat] $digest duration: {{digestDuration}} milliseconds
a+b: {{foo.a + ' ' + foo.b}}
{{item.text}} (cell 1) {{item.text}} (cell 2)

Actual elements in DOM ({{getDomElementsDesc().length}}): 

						
							

								{{el}}

You can try different array sizes using the form below