ng-infinite滚动角设置偏移

时间:2015-11-27 13:21:19

标签: angularjs offset nginfinitescroll

需要跟踪我的偏移量,这样每次滚动或点击“加载更多”时我都可以获得下一组。它提高了性能。我在这里尝试设置偏移量和限制并将请求参数传递给我的节点服务器,但是如何使用偏移量在该限制之后更新或增加:

我的网址为:/foo?limit=7&&offset=0;

我的角度控制器功能如下:

$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;
    });
};

2 个答案:

答案 0 :(得分:0)

每次无限指令请求显示更多记录时,您必须将偏移量保留在控制器的范围内并更新偏移量:

$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){
   ...
}

答案 1 :(得分: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);
            });
        }

在DataService中

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

现在在窗口滚动到某个高度(windowHeight-2000px)之后,再次调用api来获取数据。以前的数据正在与现有数据连接。