Include dependency js file in index.html
- <script type="text/javascript" src="lib/ng-infinite-scroll.min.js"></script>
Inject module in app.js
- angular.module('myapp', [ 'ngResource', 'infinite-scroll' ]);
Html code:
<div class="container pad0">
<div class="scrollpagebox">
<div infinite-scroll-disabled="isBusy" infinite-scroll="infiniteScroll()" infinite-scroll-distance="1" style="overflow: auto;">
<div class="col-md-6 col-sm-8 col-sm-offset-2 col-md-offset-0" data-ng-repeat="job in jobsList">
<div class="old-event event">
<div class="content">
<h1 class="name">
{{job.name}} (#{{job.id}})
</h1>
<p class="schedule blue">
{{job.type}}
</p>
<p class="schedule blue">
{{job.companyName}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
In Controller:
$scope.isBusy = false;
$scope.limit = 5;
$scope.offset = 0;
$scope.jobsList = [];
$scope.getJobsList = function(){
$scope.isBusy = true;
JobService.list({start: $scope.offset, rows: $scope.limit}, function (jobs){
$scope.jobsList.push.apply($scope.jobsList, jobs);
$scope.jobsSize = $scope.jobsList.length;
if (jobs.length > 0) {
$scope.isBusy = false;
$scope.offset += $scope.limit;
}else{
$scope.isBusy = true;
}
});
}
$scope.infiniteScroll = function(){
$scope.getJobsList();
}
The thing is how you manage your isBusy variable.
- <script type="text/javascript" src="lib/ng-infinite-scroll.min.js"></script>
Inject module in app.js
- angular.module('myapp', [ 'ngResource', 'infinite-scroll' ]);
Html code:
<div class="container pad0">
<div class="scrollpagebox">
<div infinite-scroll-disabled="isBusy" infinite-scroll="infiniteScroll()" infinite-scroll-distance="1" style="overflow: auto;">
<div class="col-md-6 col-sm-8 col-sm-offset-2 col-md-offset-0" data-ng-repeat="job in jobsList">
<div class="old-event event">
<div class="content">
<h1 class="name">
{{job.name}} (#{{job.id}})
</h1>
<p class="schedule blue">
{{job.type}}
</p>
<p class="schedule blue">
{{job.companyName}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
In Controller:
$scope.isBusy = false;
$scope.limit = 5;
$scope.offset = 0;
$scope.jobsList = [];
$scope.getJobsList = function(){
$scope.isBusy = true;
JobService.list({start: $scope.offset, rows: $scope.limit}, function (jobs){
$scope.jobsList.push.apply($scope.jobsList, jobs);
$scope.jobsSize = $scope.jobsList.length;
if (jobs.length > 0) {
$scope.isBusy = false;
$scope.offset += $scope.limit;
}else{
$scope.isBusy = true;
}
});
}
$scope.infiniteScroll = function(){
$scope.getJobsList();
}
The thing is how you manage your isBusy variable.
No comments:
Post a Comment