How to implement infinite scrolling in AngularJS



Image not found!!

To implement infinite scrolling in AngularJS, you can follow these steps:

  1. Set up your AngularJS project: Make sure you have AngularJS installed and set up in your project.

  2. Create a directive for infinite scrolling: You'll create a custom directive that will handle the infinite scrolling functionality.

  3. Implement the infinite scrolling logic: Within the directive, you'll implement the logic to detect when the user has scrolled to the bottom of the page and trigger the loading of more content.

Here's a basic example of how you can achieve this:

html
<!DOCTYPE html>
<html ng-app="infiniteScrollApp">
<head>
    <title>Infinite Scrolling</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <style>
        #scrollable {
            height: 200px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>

<div ng-controller="MainController">
    <div id="scrollable" infinite-scroll="loadMore()">
        <div ng-repeat="item in items">
            {{ item }}
        </div>
    </div>
</div>

<script>
    angular.module('infiniteScrollApp', [])
        .controller('MainController', function($scope, $timeout) {
            $scope.items = [];

            // Simulated data loading
            function loadItems() {
                for (var i = 0; i < 10; i++) {
                    $scope.items.push('Item ' + ($scope.items.length + 1));
                }
            }

            // Initial data load
            loadItems();

            // Function to load more items
            $scope.loadMore = function() {
                $timeout(function() {
                    loadItems();
                }, 1000);
            };
        })
        .directive('infiniteScroll', function() {
            return {
                restrict: 'A',
                link: function(scope, element, attrs) {
                    var raw = element[0];

                    element.bind('scroll', function() {
                        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                            scope.$apply(attrs.infiniteScroll);
                        }
                    });
                }
            };
        });
</script>

</body>
</html>

In this example:

  • We have a controller MainController managing a list of items.
  • The infinite-scroll directive is applied to a scrollable container (#scrollable). This directive listens for scroll events and triggers the loadMore() function when the user scrolls to the bottom of the container.
  • Inside the loadMore() function, more items are loaded and added to the list after a short delay (simulated asynchronous data loading with $timeout).

You can customize this example based on your specific requirements and integrate it into your AngularJS project.

Category List