CODEWITHSUNDEEP
angularjs
Peter Boomsma
Peter Boomsma

Reputation: 9808

ngInfiniteScroll not working as expected

I'm having trouble getting started with the ngInfiniteScroll directve. I've created a scope called movies which has about 150 objects of movies with titles and release dates. Using a ng-repeat I show the objects in a container element.

I've tried to create a sample app in plunker, but when I view the app it just shows all the records and the ngInfiniteScroll directive doesn't seem to do anything special.

http://plnkr.co/edit/bohgyL?p=preview

  <div infinite-scroll='myPagingFunction()' infinite-scroll-distance='3'> 
    <div class="repeat" ng-repeat="movie in movies | orderBy: '-release_date'">
      <h2> {{ movie.title }} </h2>
      <h2> {{ movie.release_date }} </h2>
    </div>
  </div>

The desired result is that when you view the app you only see the results that are in your viewport, and when you scroll down additional results are inserted into the viewport. Like this.

So what am I overlooking here?

Upvotes: 0

Views: 583

Answers (1)

Zack Tanner
Zack Tanner

Reputation: 2590

You are not showing us any code for myPagingFunction(), so I assume that to be the problem. That function doesn't exist out of the box, you need to make it. Refer to the example shown here: https://binarymuse.github.io/ngInfiniteScroll/demo_basic.html

If you do have a paging function, please show it to us so we can help debug your code.

Upvotes: 1

Related Questions