Code Samples: infinity scroll

Wednesday, November 16, 2016
Angular-js infinity scroll to load more data on window or other element scrolling

<!DOCTYPE html>
<html>
    <head>
        <title>Infinite scrolling to load more data using angular-js</title>
        <style type="text/css">
            div.scroll-test {
                height: 100%;
                background: #123213;
                color: #fff;
                overflow: auto;
                margin: 0 auto;
                padding: 0.5em;
            }
        </style>
        
        <script src="http://code.angularjs.org/1.2.12/angular.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        
        <script type="text/javascript">
            var app = angular.module("myApp", []);
           
            app.controller("ScrollController", function($scope, $http) {
                $scope.items = ["You have to scroll down to load more items..."];
                $scope.loading = false;
                $scope.counter = 0;
                $scope.rows = 1;
                
                var s = "----------------------------------------------------";
                s += "-------------------------------------------------------";
                s += "-------------------------------------------------------";
                
                $scope.loadMore = function() {
                    if(!$scope.loading) {
                        $scope.loading = true;
                        $http({
                            method: "GET",
                            url: "http://localhost/scroll/data.html?counter=" + ($scope.counter++)
                        }).success(function(data, status, header, config) {
                            $scope.loading = false;
                            data = data.split("\n");
                            for(i = 0; i < data.length - 1; i++) {
                                $scope.items.push(($scope.rows++) + "=" + data[i]);
                            }
                            $scope.items.push(($scope.rows++) + s);
                        });
                    }
                };
                
                var params = {};
                window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) {
                    params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
                });
                var type = params.type === undefined ? '' : params.type;
                
                $scope.window = true;
                if(type == 'window') {
                    //Initializing the list
                    $scope.loadMore();
                }
                else if(type == 'div') {
                    $scope.window = false;
                    $("div.scroll-test").height(window.innerHeight - 130);
                    //Initializing the list
                    $scope.loadMore();
                }
                else {
                    $scope.items.push("You have to define 'type' parameter in url & value would be 'window' or 'div' as ?type=window");
                }
            });
            
            app.directive("windowScroll", function ($window) {
                return function(scope, element, attrs) {
                    angular.element($window).bind("scroll", function() {
                        if(scope.window && $window.pageYOffset + $(window).height() + 50 >= $(document).height()) {
                            scope.$apply(attrs.windowScroll);
                        }
                    });
                };
            });
           
            app.directive("divScroll", function() {
                return {    
                    restrict: 'A',
                    link: function(scope, element, attrs) {
                        var raw = element[0];
                        element.bind("scroll", function() {
                            if(!scope.window && raw.scrollTop + raw.offsetHeight + 50 >= raw.scrollHeight) {
                                scope.$apply(attrs.divScroll);
                            }
                        });
                    }
                }
            });
        </script>
    </head>

    <body>
         <div data-ng-app="myApp" data-window-scroll="loadMore()" data-ng-controller="ScrollController">
             <div>
                 <div class="scroll-test" data-div-scroll="loadMore()">
                     <p data-ng-repeat="item in items">
                         {{item}}
                     </p>
                 </div>
                <h1><i>INFINITE SCROLLING IN ANGULAR-JS<span data-ng-show="loading"> (Loading items...)</span></i></h1>              
             </div>       
         </div>
    </body>
</html>
Pages

Wednesday, November 16, 2016

Angular-js infinity scroll to load more data on window or other element scrolling
