JSFiddle - React, Tailwind, and code Playground

AngularJS: Infinite Scrolling

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="fixed" when-scrolled="loadMore()" class="panel panel-default">
  <ul>
  <li ng-repeat="i in items"><span class="label label-info">{{$index+1}}/ {{i.id}}</span> <img ng-src="http://placehold.it/400x30/{{i.bg}}/ffffff/&text=andrew" class="thumbnail img-rounded"></li>
  </ul>  
</div>

CSS

body{background:#eeeeee}
li {
  height: 120px;
  border-bottom: 1px solid gray;
}

#fixed {
    height: 400px;
    overflow: auto;
}

JavaScript

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

app.controller("drewcntrl", function($http, $scope, $timeout, $window,$document, $rootScope){
	'use strict';

    $scope.items = [{id: 1, bg : "000000"},{id: 2, bg : "222222"},{id: 3, bg : "333333"}];
 	//var counter = 0;
    $scope.loadMore = function() {
       for (var i = 0; i < 4; i++) { // load another 4 at a time 
       // angular.forEach($scope.items , function(item){ // load existing amount + 1 hmmm. wtf
        var bgcol = Math.floor(Math.random()*16777215).toString(16);
            $scope.items.push({id: $scope.items.length+1, bg : bgcol});
           // counter += 1;
        }
        //});
    };
    
   $scope.loadMore();
 });

app.directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        var scrollimgs = elm[0];
        
        elm.bind('drew', function() {
            if (scrollimgs.scrollTop + scrollimgs.offsetHeight >= scrollimgs.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});