This basic demo implements an infinite scroller that simply appends elements to an array. The elements are rendered to the page with ngRepeat.
<div ng-app='myApp' ng-controller='DemoController'>
<div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
<img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
</div>
</div>
var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('DemoController', function($scope) {
$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
$scope.loadMore = function() {
var last = $scope.images[$scope.images.length - 1];
for(var i = 1; i <= 8; i++) {
$scope.images.push(last + i);
}
};
});
For more details and instructions, please see the documentation.
If you use Bower to manage your client-side packages, you can use it to install ngInfiniteScroll. To install, simply run:
bower install ngInfiniteScroll#{{selectedVersion}}
Bower cannot be used to install ngInfiniteScroll for the development head; please select another version to install with Bower.
Select a different version: