Skip to content

A much more quicker replacement for AngularJS ng-repeat directive

License

Notifications You must be signed in to change notification settings

mlesar/quick-ng-repeat

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 82.3%
  • HTML 16.9%
  • CSS 0.8%