angular-infinite-scroller
AngularJS directive to displays limited number of elements in an ng-repeat like manner.
Download
Install
Import angular-infinite-scroller
module to your main angular module.
angular;
Then you are free to use the infinite-scroller
directive:
{{item}}
Make sure to set height
and overflow
of the parent container:
Demo
See documentation and examples on github page.
Examples
Simple usage
Define the source in an angular controller
$scopeitems = ...
Bind the array like you would use ng-repeat in the template
{{item}}
Known issues
Binding with curly brackets
First population of items is using calculation based on items' height, so it's important to make rows rendered with it's final height even before the binding actually happened. To prevent accidental linebreaking before the template is linked avoid using brackets for longer texts. Instead of:
{{currentCar.Owner.Firstname + '' + currentCar.Owner.LastName}}
Use
One time binding
DOM elements in the list are reused in the scrolling process, and are not cleaned up completely. To make this behaviour work, avoid using one time binding in the list.
Contribution
You are welcome to submit issues or pull-requests to the repository.
Build
Development is done with typescript and the build is using webpack.
- installing dependencies
npm install
- build
npm build
- try lint autofix
npm lint-fix
Tests
Unit tests are running in Karma using Jasmine.
- running unit-tests (also generates html report under
coverage
folder)npm run test
- running Karma in debug mode with proper source-maps
npm run test-debug
- running UI testsnpm run webdriver-update // install/update webdriver for protractornpm run e2e:serve // serve static site for UI testsnpm run e2e:local // run protractor against localhost