Home

Awesome

angular-vs-repeat v2.0.9

Looking for a version for Angular 2?

Check out https://github.com/kamilkp/ng2-vs-for


Breaking changes in v2.x

Major changes in v1.0.0-beta.0

Build Status NPM version Bower version

Virtual 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

DESCRIPTION:

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.

LIMITATIONS:

USAGE:

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>

OPTIONAL PARAMETERS (attributes):

OPTIONS:

Options shall be passed as an object to the vs-repeat attribute e.g.:

<div vs-repeat="{scrollParent: 'window', size: 20}"></div>

Available options:

EVENTS: