how to develop scrollbar load more functionality in angularjs without jquery to work just like skype application it should fire event on scrolling up
below is the code with plunker link https://plnkr.co/edit/QBeEyCSksj3wfBqMb2kp?p=preview using infinitescroll module but its firing event on scroll down i want it to fire on scroll up just like we see in skype application
<script src="ngInfiniteScroll.js"></script>
<script>
var app = angular.module('Demo', ['infiniteScroll']);
app.controller('VerticleDemo', function ($scope) {
$scope.items = [];
$scope.canLoad = true;
$scope.maxItems = 100;
$scope.addItems = function () {
for (var i = 0; i < 10; i++) {
$scope.items.push({name:'item ' + ($scope.items.length + 1)});
if ($scope.items.length >= $scope.maxItems) {
$scope.canLoad = false;
return;
}
}
};
$scope.reset = function () {
$scope.items = [];
$scope.canLoad = true;
$scope.addItems();
};
$scope.reset();
})
</script>
<style type="text/css">
.scroll-loader {
background: #f7f7f7;
height: 300px;
border: 3px solid #d2d2d2;
margin-bottom: 20px;
overflow: auto;
padding: 10px 0;
border-radius: .5rem 0 0 .5rem;
}
.scroll-loader li {
list-style: none;
border-bottom: 1px solid #aaa;
padding: 5px;
margin-bottom: 3px;
}
</style><body ng-controller="VerticleDemo" >
<div class="container">
<div>
<h1>Angular Infinite Scroll Demo</h1>
<p>Scroll the div to add more elements.</p>
<div infinite-scroll="addItems()" class="scroll-loader" can-load="canLoad" threshold="100">
<ul>
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
</div>
<p>Maximum {{maxItems}} items
<small>({{items.length}} added)</small>
<button ng-click="items=[];canLoad=true;addItems();" class="btn">Reset</button>
</p>
<p>
It is up to you to add server requests and loading indicators.
</p>
</div>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire