How to have the infinte scroll in angularjs?

Question

I have a code .I am trying to apply the infinte scroll but its not performing.

Can any one help me to solve this problem.It displaying all numbers,even if i scroll down its not performing like infine scrol.

//HTml file
<style>
#fixed {
            height: 400px;
         overflow: auto;
        }
</style>
<body ng-controller="controller">

    <div id="fixed" infinite-scroll="scrolling()" infinite-scroll-distance='2'>

        <li  ng-repeat="i in items" >{{i.id}}</li>

    <img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" ng-hide="!showLoader"/>
    </div>

</body>
</html>

//js file

var app=angular.module("myapp",['infinite-scroll']);
app.controller("controller",['$scope',function($scope){
    $scope.items=[];
    var counter=0;
    $scope.showloader=false;
    $scope.scrolling=function(){

        for(var i=0;i<500;i++)
            {

                $scope.items.push({id:counter});
                counter++;
                /*console.log({{items}});*/
            }
        $scope.showloader=true;
    };
    $scope.scrolling();
}]);

Yes i have done the same which is in that link...Iam unable to get infinte scrolling. — Vindya Veer, Sep 14 '15 at 05:42

Reyraa · Accepted Answer · 2015-09-14T06:22:26.203

0

This is how You can bind listener to scroll event of window. I put a 100 pixel space where Api requests happen, and I'm using a flag to prevent multiple Api requests:

 app.directive('infiniteScroll', [
      '$rootScope', '$window', '$http',
      function ($rootScope, $window, $http) {
        return {
          link: function ($scope, $element, $attrs) {



            window.angular.element($window).bind('scroll', function () {




              // start fetching data in 100 pixels space in bottom of the page
              clientHeight = html.scrollHeight - 100;
              scrollHeight = html.scrollTop + document.querySelector('body').clientHeight;


              // request for further data only if at the bottom of the page and no other request are in progress
              if (clientHeight <= scrollHeight && $rootScope.makeInfiniteCall) {

                // prevent further fetchings 
                $rootScope.makeInfiniteCall = false;

                // Fetch you data here and push it to scope, then let further Api requests happen
                 $http.get('/path/to/Api').then(function (result) {
                   // unshift items if the sequence is important
                   for (var i = result.data.length -1; i == 0; i-- ){                
                     $scope.data.unshift(result.data[i]);
                   }
                   // or simply concat the entire array if the sequence of items is not important
                   // $scope.data.concat(result.data);
                   $rootScope.makeInfiniteCall = false;
                 });

              }
            });
          }
        }
      }
    ]);

edited Sep 14 '15 at 06:22

answered Sep 14 '15 at 06:13

Reyraa

4,174
2
28
54

Cant we do it without using a directive ? – Vindya Veer Sep 14 '15 at 06:22
The correct way of handling events and behaving with elements is Angular is using directives. it's sooo easy to use, simply add infinite-scroll as a property to the body or html tag of your document. if your coming from a JQuery background I suggest you to read this: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – Reyraa Sep 14 '15 at 06:25
Another point, When ever you found your controllers filled with logic or event listeners of functions related to the interaction of user, be sure you're incorrectly bypassing AngularJs to pure Javscript – Reyraa Sep 14 '15 at 06:28
Its better to know how to do without using directive right..I have done using dfirective .It worked .But I am trying without using directive – Vindya Veer Sep 14 '15 at 06:32
I have done that program but i am unable to display the loading image – Vindya Veer Sep 14 '15 at 07:33
If you just push the new data into the right array in your scope, Angular will update the view automatically. you just need to check two things: if you have used the directive correctly by checking if Api call happens or not, and two: if the target array is getting updated properly – Reyraa Sep 14 '15 at 07:36
Once check my answer and can u give me a solution for it to display image – Vindya Veer Sep 14 '15 at 07:39
I you provide your reason why you trying not to use a directive I may help you better on this, but as a solution, try adding the event handler part of my directive inside your controller instead of $scope.scrolling – Reyraa Sep 14 '15 at 08:30
If i complete that doing it without directive ,i'l try the one u have said.But only my aim is to do it without using directive – Vindya Veer Sep 14 '15 at 09:06

Vindya Veer · Answer 2 · 2015-09-14T10:52:32.250

//HTML code

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src='angularfiles/angular.min.js'></script>
<script src="Jsfiles/scroll.js"></script>
<script src="angularfiles/ng-infinite-scroll.js"></script>
</head>
<style>
#fixed {
            height: 400px;
         overflow: auto;
        }
        li {
             height: 120px;
            border-bottom: 1px solid gray;
            }

</style>
<body ng-controller="controller">

    <div id="fixed">
    <ul infinite-scroll="scrolling()" infinite-scroll-distance='0' infinite-scroll-parent="true">
        <li  ng-repeat="i in items" >{{i.id}}</li>
        <img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif"/>
    </ul>


    </div>
</body>
</html>

//Js code

var app=angular.module("myapp",['infinite-scroll']);
app.controller("controller",['$scope',function($scope){
    $scope.items=[];
    var counter=0;

    $scope.scrolling=function(){

        for(var i=0;i<5;i++)
            {

                $scope.items.push({id:counter});
                counter++;

            }

    };

}]);

This is my answer which i have tried without using directive.Hope it may helpful to others .

How to have the infinte scroll in angularjs?

2 Answers2