angularjs infinite scroll

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.

No comments:

Post a Comment