AngularJS - A simple infinite scroll
Solution 1
There are two problems. First of all, what is attr.whenScrolled
? Its undefined. Second one - limitTo: 5
. You will allways show only 5 elements!
Here you have working code: http://plnkr.co/edit/VszvMnWCGb662azo4wAv?p=preview
What was changed? Your directive is called directiveWhenScrolled
so call:
scope.$apply(attr.directiveWhenScrolled);
instead of
scope.$apply(attr.whenScrolled);
How lets deal with static limit. Change it into variable (remember about defining default value):
<li ng-repeat="i in items | limitTo: limit">{{ i.Title }}</li>
And now your loadMore
function should look like this:
$scope.loadMore = function() {
$scope.limit += 5;
};
Solution 2
I've found an awesome angularjs 'infinite' scroll solution.
What you need to do is just add an in-view directive in your project and do next stuff:
angular.module('infinitScrollApp', ['angular-inview'])
.controller('infinitScrollController', infinitScrollController);
function infinitScrollController($scope) {
$scope.limit = 10;
$scope.items = Array.from(Array(1000).keys());
$scope.loadMore = function (last, inview) {
if (last && inview) {
$scope.limit += 10;
}
}
}
.infinit-scroll-container {
height: 150px;
overflow-y:scroll
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-inview/3.0.0/angular-inview.min.js">
</script>
</head>
<body ng-app="infinitScrollApp">
<div class="infinit-scroll-container">
<ul ng-controller="infinitScrollController">
<li ng-repeat="item in items | limitTo: limit" in-view="loadMore($last, $inview)">
{{item}}
</li>
</ul>
</div>
</body>
</html>
Oam Psy
Updated on June 07, 2022Comments
-
Oam Psy about 2 years
I am trying to write a similar small infinite scroll to the one found here: http://jsfiddle.net/vojtajina/U7Bz9/
I've been able to display the first 5 pieces of data, however on scroll, the further items are not being displayed.
HTML:
<div id="fixed" directive-when-scrolled="loadMore()"> <ul> <li ng-repeat="i in items | limitTo: 5">{{ i.Title }}</li> </ul> </div>
JS:
var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.items = [ { "Title":"Home" }, { "Title":"Contact" }, { "Title":"Help" }, { "Title":"About" }, { "Title":"Our Offices" }, { "Title":"Our Locations" }, { "Title":"Meet the Team" } , { "Title":"Our Mission" }, { "Title":"Join Us" }, { "Title":"Conferences" }, { "Title":"Tables" }, { "Title":"Chairs" } ]; var counter = 0; $scope.loadMore = function() { for (var i = 0; i < 5; i++) { $scope.items.push({id: counter}); counter += 10; } }; $scope.loadMore(); }); app.directive("directiveWhenScrolled", function () { return function(scope, elm, attr) { var raw = elm[0]; elm.bind('app', function() { if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { scope.$apply(attr.whenScrolled); } }); }; });
Here's a plunker: http://plnkr.co/edit/6ggYGZx6scSoJ5PNhj67?p=preview
-
Adrian Grygutis over 4 yearsIs there any reason that answer get -1?
-
itim over 4 yearsI have no idea why this answer get -1. For me this approach works perfectly :)