Intended as a replacement for
ng-repeat for large collections of data and
contains different solutions to the problem.
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
ng-repeat instances, but it does work as a drop-in replacement (with
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/
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
included as a dependency:
Then use the directive
sf-virtual-scroll just as you would use
If you want to expose the scroll postion (to simulate an
atEnd event for
ng-model and you have access to the scroll properties.
Check out the examples in the demo folder for all the details.
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
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
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
Or by adding a line to your
If you are using
grunt for your build, consider using a plugin like
All comments to email@example.com
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.