0

Need to keep track of my offset so that I can get the next set each time either scroll or click 'Load more'. It improves performance. I am trying out here by setting offset and limit and passing as request params to my node server,but how to update or increment after that limit using offset:

my url as: /foo?limit=7&&offset=0;

My angular controller function as:

$scope.findDetails = function(){
    var limit = 10;
    var offset = 0;
    //DataService.getUsers(limit,offset).then(function(customerdetails){
    DataService.getUsers({limit,offset},function(customerdetails){
        $scope.customers = customerdetails;
    }, function(error){
        $scope.status = 'Unable to load customer data: ' + error.message;
    });
};
Arulkumar
  • 12,153
  • 12
  • 44
  • 61
user4223185
  • 55
  • 6

2 Answers2

0

You must keep the offset in the scope of the controller and update the offset every time the infinite directive request more records to display:

$scope.limit = 10;
$scope.offset = 0;

//bind this function to the ng-infinite directive
$scope.infiniteScrollFunction = function() {
   $scope.offset += $scope.limit;
   $scope.findDetails(); 
};

$scope.findDetails = function() {
   DataService.getUsers({limit: $scope.limit,offset: $scope.offset},
      function(customerdetails){
   ...
}
Alex Pollan
  • 854
  • 5
  • 13
0
var $scope.height = $('#div-height').height()
var flag = false;
var $scope.customers = []
$(window).scroll(function() {
  if ($(this).scrollTop() > $scope.height-2000) {
                     if (!flag) {
                         flag = true;
                           refreshCustomers();
                     }
                 }
         });
function refreshCustomers() {
            DataService.getCustomers().then(function (data) {
                $scope.customers = $scope.customers.concat(data);

                setTimeout(function () {
                    $scope.height = $('#div-height').height();
                    flag = false
                }, 0.1);
            });
        }

In DataService

    factory.getCustomers = function(){
        return $http.get(...api......&&limit=7).then(function (results) {
            var customers = results.data.customers;
            return customers;
        });
    };

Now after the window is scrolled up to certain height(windowHeight-2000px), the api is called again to get data. The previous data is being concatenated with present data.

pbt
  • 41
  • 5