Repeater with 1000+ items to display efficiently

[Konstantin Tarkus]

Let's say I have a list of 5000 items I need to render on a page, but for performance reasons only 100 of these are going to be displayed at any given time depending on how far the page is scrolled (users scrolls down the page, new HTML elements rendered from my list, old one are destroyed).

Can you point me towards direction on how to implement it correctly with AngularJS? For example should I create my own repeater directive? Or, is it possible to use the existing ngRepeeater and add a derective for HTML element which will be responsible for destroying itself when element goes away from page's view during scroll?

[ganaraj p r]

Here is a way of achieving what you are trying to do .

In order to display just 100 of the 5000 items you can use filters. 

<div ng-repeat="item in items | show100">

something like that. 

Now the filter should depend on the scrollposition. Create a service ( notice I said service and not a directive ) which will get the scroll position as a value from the top. Pass this as one of the dependencies for your show100 filter. 

Now your filter can do the calculations and return the 100 items that need to be displayed. 

On Thu, Sep 27, 2012 at 12:47 PM, Konstantin Tarkus <koi...@gmail.com> wrote:

Let's say I have a list of 5000 items I need to render on a page, but for performance reasons only 100 of these are going to be displayed at any given time depending on how far the page is scrolled (users scrolls down the page, new HTML elements rendered from my list, old one are destroyed).

Can you point me towards direction on how to implement it correctly with AngularJS? For example should I create my own repeater directive? Or, is it possible to use the existing ngRepeeater and add a derective for HTML element which will be responsible for destroying itself when element goes away from page's view during scroll?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

--
Regards,
Ganaraj P R

[Konstantin Tarkus]

How can I make ng-repeat update the view after onscroll event? http://jsfiddle.net/koistya/z6fLd/

[ganaraj p r]

http://jsfiddle.net/ganarajpr/z6fLd/8/ 

This is a possible solution. But I dont really like the jquery call there. If we could eliminate that, I guess it would be perfect !

[Konstantin Tarkus]

I'd like to make it work without flickering. I assume that ngRepeat re-renders all the items when the list is changed, to make it work more smoothly new items should be added, old ones removed and the once which are still within the visible area should be kept as they are. In order to do that I should implement custom ngRepeat, right?

[ganaraj p r]

The next version of angular will have support for animations for ng-repeat and ng-show / hide. If you can wait till then, then perhaps you could do everything that you wish for. If you have to deliver before that, then I guess the only option is to write your own ng-repeat. You could check out the source for ng-repeat and just modify it if you wish!

On Thu, Sep 27, 2012 at 8:03 PM, Konstantin Tarkus <koi...@gmail.com> wrote:

I'd like to make it work without flickering. I assume that ngRepeat re-renders all the items when the list is changed, to make it work more smoothly new items should be added, old ones removed and the once which are still within the visible area should be kept as they are. In order to do that I should implement custom ngRepeat, right?

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Mark Waddle]

Hi Konstantin,

You might want to look at this thread on a directive that someone made to integrate SlickGrid. I haven't looked it in detail so I can't speak to the quality of the directive, but I know that SlickGrid does the infinite scrolling you are looking for with automatic dom manipulation as you scroll. The creator appears to be actively developing it and appears to provide proactive support.

https://groups.google.com/forum/?fromgroups=#!searchin/angular/slickgrid/angular/3AdNX1Pupmc/s_aQ0XeWmBUJ

Cheers,

Mark

[jon....@gmail.com]

Ganaraj -- nice little solution!  

IMO, that slick-grid fiddle is a long way from being something well-integrated and nicely re-useable. I'm faced with the same sort of decision right now (choosing between integrating with slickgrid vs. rolling it all angular style) and the simplicity of solving these problems with angular really makes me want to go that route and not have to worry about the extra library. Nice scrolled paging and overall performance are two of my biggest hesitations, though (think that big angular table built on ng-repeats is snappy enough for your data sizes? now double check that in IE8 and see if its still true :P). 

I'll be interested to see how solutions develop on both ends for these problems...

[eric.d...@gmail.com]

I got this to work with a secondary list of items (buffer). I would check scroll position and shift items from my buffer to my items array. I can scrounge up the code if you'd like. It performed very well.

[Mark Waddle]

I would love to see a basic example of this, thanks!

[Gopal Patel]

once I needed to show hide a lot of elements in lists,

what I did was assign a class to each element and change style of that class dynamically from display block to display none

instead of doing it on each element.

--

[timot...@gmail.com]

https://github.com/Crash8308/ng-grid

we are working on getting the virtualization to work properly, it is based on koGrid from knockout. we are working on it hard.

[Tim Sweet]

https://github.com/Crash8308/ng-grid

virtualization is working great now. We are going to be adding more features here very rapidly including templating (row and cell)

[Tim Sweet]

lots of updates, but renamed my account so it's now under https://github.com/timothyswt/ng-grid