Check out https://github.com/kamilkp/ng2-vs-for
vs-repeat
attribute
instead of using separate attributes for each option (except for vs-repeat-container
)top
updating directives - even better performanceVirtual Scroll for AngularJS ngRepeat directive
Demo: http://kamilkp.github.io/angular-vs-repeat/
You can find the source code for this demo on branch "gh-pages".
Changelog: https://github.com/kamilkp/angular-vs-repeat/blob/master/CHANGELOG.md
vsRepeat
directive stands for Virtual Scroll Repeat. It turns a standard ngRepeated set of elements in a scrollable container
into a component, where the user thinks he has all the elements rendered and all he needs to do is scroll (without any kind of
pagination - which most users loath) and at the same time the browser isn't overloaded by that many elements/angular bindings etc.
The directive renders only so many elements that can fit into current container's clientHeight
/clientWidth
.
ngRepeat
First include vs-repeat
as a module dependency in your app.
In order to use the vsRepeat directive you need to place a vs-repeat attribute on a direct parent of an element with ng-repeat
example:
<div vs-repeat="options">
<div ng-repeat="item in someArray">
<!-- content -->
</div>
</div>
or:
<div vs-repeat="options">
<div ng-repeat-start="item in someArray">
<!-- content -->
</div>
<div>
<!-- something in the middle -->
</div>
<div ng-repeat-end>
<!-- content -->
</div>
</div>
You can also measure the single element's height/width (including all paddings and margins), and then speficy it as a value
of the options' size
property. This can be used if one wants to override the automatically computed element size.
example:
<div vs-repeat="{size: 50}"> <!-- the specified element height is 50px -->
<div ng-repeat="item in someArray">
<!-- content -->
</div>
</div>
ngRepeat
Options shall be passed as an object to the vs-repeat
attribute e.g.:
<div vs-repeat="{scrollParent: 'window', size: 20}"></div>
Available options:
horizontal
- boolean; stack repeated elements horizontally instead of vertically (defaults to false)
offset-before
- top/left offset in pixels (defaults to 0)
offset-after
- bottom/right offset in pixels (defaults to 0)
scroll-margin
- how many pixels ahead should elements be rendered while scrolling (defaults to 0)
latch
- if true, elements will be rendered gradually but won't be removed when scrolled away (defaults to false)
size
- an angular expression evaluating to the element's size (in pixels) - it is possible to use the ngRepeat's local repeaing variable in this expression
autoresize
- use this attribute without vs-size and without specifying element's size. The automatically computed element style will
readjust upon window resize if the size is dependable on the viewport size
scrolled-to-end
- callback will be called when the last item of the list is rendered
scrolled-to-end-offset
- set this number to trigger the scrolledToEnd callback n items before the last gets rendered
scrolled-to-beginning
- callback will be called when the first item of the list is rendered
scrolled-to-beginning-offset
- set this number to trigger the scrolledToBeginning callback n items before the first gets rendered
vsRepeatTrigger
- an event the directive listens for to manually trigger reinitializationvsRepeatResize
- an event the directive listens for to manually trigger the autosizing algorithmvsRepeatReinitialized
- an event the directive emits upon reinitialization done; the listener may accepts three arguments: event
, startIndex
and endIndex