CODEWITHSUNDEEP
angularjsangularjs-ng-repeatinfinite-scroll
Suresh Kota
Suresh Kota

Reputation: 315

ng-repeat limitTo on page scroll to bottom

I am trying to achieve infinite scroll. On the way I got to know that I can use limitTo option on ng-repeat to load limited number of records. I have used this on click of a button like this:

profile.ejs:

<li class="media media-clearfix-xs"  ng-repeat="post in allPosts | limitTo:totalDisplayed" id="october" >

      <!-- Post start here -->
       <!-- Post End here -->

    <button class="btn btn-primary btn-xs pull-right" ng-click="loadMore()">Load more</button>

profileController.js:

$scope.totalDisplayed = 5;

$scope.loadMore = function () {
  $scope.totalDisplayed += 5;  
};

It is working fine. How can I do the same when user scrolls to bottom of the page. Upon searching for hours I have found some links but no luck. Can anyone please help me how to do this?

Upvotes: 1

Views: 3069

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

I would suggest you to create one directive that will have scroll event on that element, when the bottom will reach of that element we will call the scope function from directive.

Markup

<ul reached-to-bottom="loadMore()">
    <li ng-repeat="post in allPosts | limitTo:totalDisplayed"></li>
</ul>

Directive

app.directive('reachedToBottom', function($window, $document){
    return{
        link: function(scope, element, attrs){
            element.on('scroll', function(){
                if(element[0].scrollTop + element.innerHeight() == element[0].scrollHeight){
                    scope.$eval(attrs.reachedToBottom);
                }
            })
        }
    }
});

Upvotes: 2

Related Questions