Awesome Open Source
Awesome Open Source

AngularJS directive for much more quicker lists rendering

Features

  • Shallow list watch (ngRepeat uses deep watch)
  • Animations support
  • Special service to cause list render outside of digest cycle
  • Smooth scrolling even on heavy compited lists (check example)
  • About 200% performance boost
  • Still hesitating? Try to scroll page with ng-repeat list and a page with quick-ng-repeat

Usage example:

Require quick-ng-repeat.js to your project and use this syntax in your templates:

<ul>
  <li quick-ng-repeat="item in list" quick-repeat-list="items">
    {{ item.name }}
  </li>
</ul>

Installation

Using bower package manager:
bower i quick-ngrepeat --save

Note the single hyphen in the package name

Using the browser:
<script src="quick-ng-repeat.js"></script>

Why we need the 'quick-repeat-list' attribute?

In quick-ng-repeat directive everything is done to make is really fast. So we store a special callback with name of this attribute. This is a full answer

Compared to usual ngRepeat

  • Compare example/index.html (uses quickNgRepeat) and example/index_classic.html (uses classic NgRepeat)

Example

Directive live example in ./example

Try out the demo (try to scroll): page with ng-repeat list and page with quick-ng-repeat

To run example

cd example && python -m SimpleHTTPServer

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,865
angular (1,322