angular-whenScrolled is a directive that you can use to implement infinite scrolling in your AngularJS applications. (NO requires jQuery to run)
- Download angular-whenScrolled.js
- Include the script tag on your page:
<script type='text/javascript' src='path/to/angular-whenScrolled.js'></script>- Ensure that your application module specifies angular-whenScrolled as a dependency:
angular.module('myApplication', ['angular-whenScrolled']);- Use the directive by specifying an whenScrolled attribute on an element.
angular.controller("demo", function ($scope, $http) {
$scope.items = [];
$scope.totalItems=0;
$scope.startList = 0;
$scope.stopLoadingData = false;
$scope.more = function () {
if (!$scope.stopLoadingData) {
$scope.loading = true;
$http.post("/app/items", {"startList": $scope.startList}).success(function (data) {
$scope.totalItems=data.totalItems;
angular.forEach(data.items,function (key) {
$scope.items.push(key);
});
$scope.stopLoadingData = ($scope.items.length === $scope.totalItems);
$scope.startList += 10;
});
};
$scope.loading = false;
};
$scope.more();//twice execute-> controller:load and scroll:load
});- html:
<div ng-controller='demo'>
<ANY when-scrolled="more()" >
</ANY>
<div ng-show='loading'>Loading Data ...</div>
<div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent