JSFiddle - React, Tailwind, and code Playground

angular scroll load more

by Andrew Pougher

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<div ng-controller="AngularCtrl">

  <h1 class="lead navbar navbar-fixed-top"><span class="pull-right">Loaded {{title}} Items: {{limitNum}}/{{lengthOfJson}}</span></h1>

  <div class="box" scroll-position>


    <div ng-repeat="user in users | orderBy:predicate | limitTo:limitNum" class="animated fadeInRight">
      <div class=" lead thumbnail">
        {{user.name}} and {{user.score || $index}}
      </div>
    </div>
  </div>
</div>

CSS

.box {
      background-color: #eee;
      height: 99vh;
      overflow-y: auto;
      border: 12px solid #eefffe;
    }

JavaScript

var app = angular.module('app', []);


  app.controller('AngularCtrl', function($http, $scope, $timeout) {



    $scope.users = [{
      id: 1,
      name: 'John'
    }, {
      id: 2,
      name: 'Ken'
    }, {
      id: 3,
      name: 'smith'
    }, {
      id: 4,
      name: 'kevin'
    }, {
      id: 5,
      name: 'bob'
    }, {
      id: 6,
      name: 'Dev'
    }, {
      id: 7,
      name: 'Joe'
    }, {
      id: 8,
      name: 'kevin'
    }, {
      id: 9,
      name: 'Jon'
    }, {
      id: 10,
      name: 'Kendra'
    }, {
      id: 11,
      name: 'Johnny'
    }, {
      id: 12,
      name: 'Johna'
    }, {
      id: 13,
      name: 'Kendo'
    }, {
      id: 14,
      name: 'smith'
    }, {
      id: 15,
      name: 'kevin'
    }, {
      id: 16,
      name: 'bob'
    }, {
      id: 17,
      name: 'Dev'
    }, {
      id: 18,
      name: 'Joe'
    }, {
      id: 19,
      name: 'kevin'
    }, {
      id: 20,
      name: 'John'
    }, {
      id: 21,
      name: 'Ken'
    }, {
      id: 22,
      name: 'John'
    }];

    $scope.predicate = 'score';
    $scope.reverse = true;
    $scope.limitNum = 5;
    
    $scope.updateScores = function() {
      angular.forEach($scope.users, function(user) {
        user.score = user.id;
      });
    };
  $scope.updateScores();

    $scope.lengthOfJson = $scope.users.length;
  

    $scope.loadMore = function() {
      if ($scope.lengthOfJson == $scope.limitNum + 1) {
        console.log($scope.limitNum + ' you reached the end, Bra');
        return
      };
      $timeout(function() {
        $scope.limitNum ++;
        console.log("MOREMOREMROE")
      }, 20)
    };
  })


  app.directive('scrollPosition', function($window, $document) {
    return function(scope, element, attrs) {
      var w = element[0];
      angular.element(w).bind('scroll', function() {
        if (scope.lengthOfJson == scope.limitNum + 1) {
          console.log(scope.limitNum + ' you reached the end, Bra');
          return
       ...