0

I'm using ngInfiniteScroll in my project to load large data into the UI.

Here is my HTML,

<div infinite-scroll='nextPage()'>
    <div ng-repeat="app in applications">{{app.name}}</div>
</div>

In my controller,

$scope.nextPage = function(){
    console.log("nextPage");
    $scope.page++;
    .....
}

nextPage() method is called only once. It's not triggering after the first time.

What am I doing wrong ?

Venkat
  • 255
  • 1
  • 13

1 Answers1

0

Try using this example

html

<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>

script

<script>
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);
    }
  };
});
</script>
Sujithrao
  • 779
  • 2
  • 12
  • 26
  • I already did...even in this example `loadMore()` function is called only once in my project – Venkat Dec 05 '16 at 05:25