<!DOCTYPE html>
<html ng-app="inview-example">
<head>
<script data-require="angular.js@1.2.14" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular.js"></script>
<script src="https://rawgit.com/thenikso/angular-inview/master/angular-inview.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="exampleController">
<h1>Homeless Man's Infinite Scroll</h1>
<div in-view-container class="container">
<div ng-repeat="item in items | limitTo: limit">
<input type="text" ng-model="item.value" />
</div>
<span in-view="increaseLimit($inview)" ng-show="limit < items.length">Loading more...</span>
</div>
</body>
</html>
var app = angular.module('inview-example', ['angular-inview']);
app.controller('exampleController', function($scope, $timeout) {
$scope.limit = 20;
$scope.items = [];
for(var i = 0; i < 500; i++){
$scope.items.push({ value: i });
}
$scope.increaseLimit = function (actuallyIncrease) {
if (actuallyIncrease) { //this will be passed the value of $inview from directive
$timeout(function() {
$scope.limit = $scope.limit + 20;
}, 500);
}
};
});
/* Styles go here */
div.container {
max-height: 150px;
overflow-y: scroll;
}