Skip to content

About

A much more quicker replacement for AngularJS ng-repeat directive

Topics

Resources

Stars

285 stars

Watchers

11 watching

Forks

Latest commit

 

History

24 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

A much more quicker replacement for AngularJS ng-repeat directive

Topics

Resources

Stars

285 stars

Watchers

11 watching

Forks

Releases

Packages

Used by

Contributors

Languages