angular-virtual-scroll

Virtual Scrolling alternative to ngRepeat
Homepage:
4 people use it
Author: 5c7b805ea5a278b9fb9368ee03e041f0?d=https%3a%2f%2fidenticons.github.com%2f9b53ea253eeff559849b9e5275fffc81 stackfull

angular-virtual-scroll

Intended as a replacement for ng-repeat for large collections of data and contains different solutions to the problem.

About

The module was originally developed as a proof of concept but has matured into a useable component. It isn't the ideal solution to the performance issues of large ng-repeat instances, but it does work as a drop-in replacement (with some caveats).

It started because I needed to display log messages and I didn't want to use paging. There were some excellent alternatives including some wrappers of jQuery grids, but nothing was using the ng-repeat pattern. I wrote a couple of articles explaining myself as I went along:

There should be an online demo here: http://demo.stackfull.com/virtual-scroll/

Usage

Whether you build the component, copy the raw source or use bower (see below), the end result should be included in your page and the module sf.virtualScroll included as a dependency:

Then use the directive sf-virtual-scroll just as you would use ng-repeat.

If you want to expose the scroll postion (to simulate an atEnd event for example), use ng-model and you have access to the scroll properties.

Check out the examples in the demo folder for all the details.

Limitations

First up, the obligatory warning: virtual scrolling is usually the wrong approach. If you want to display really large lists, your users will probably not thank you for it: filtering can be a more friendly way to tame the data. Or if you have performance problems with angular bindings, one of the "bind-once" implementation may make more sense.

Tables are problematic. It is possible to use sf-virtual-repeat in a <tr> to create table rows, but you have to be very careful about your CSS.

The element having the sf-virtual-repeat needs to be contained within an element suitable for use as a viewport. This suitability is the main difficulty as the viewport must contain a single element (and no text) and this contained element must be explicitly sizable. So a table will need 2 parent divs for example.

The collection must be an array (not an object) and the array must not change identity - that is, the value on the scope must remain the same and you should push, pop, splice etc. rather than re-assigning to the scope variable. This is a limitiation that might be removed in future versions, but for now it's a consequence of watching the collection lightly.

Using the component

For use with bower, there is a separate repo containing just the built artifacts here: angular-virtual-scroll-bower. You can add the component to your project with:

Or by adding a line to your component.json file.

If you are using grunt for your build, consider using a plugin like bowerful.

All comments to paul@stackfull.com

ChangeLog

0.6.0 (19 Jan 2014)

  • [ENHANCEMENT #9] allow filters in the collection expression
  • [FIX #12] improved stability in the face of collection changes

0.5.0 (28 Jul 2013)

  • [FIX #6] be more careful searching for a viewport (tables again)
  • [ENHANCEMENT #2]configurable watermark levels
  • more demos.

0.4.0 (11 May 2013)

  • [ENHANCEMENT #4] prevent tables messing up the viewport
  • expose state variables as models

0.3.1 (14 Apr 2013)

  • added "auto-scroll" feature to the virtual repeater
  • fleshed out demos in place of tests

0.3.0 (17 Mar 2013)

First "dagnamit" fix.

0.2.0 (16 Mar 2013)

First sight of daylight.

comments powered by Disqus
This page was last updated over 3 years ago.