Angular无限滚动

Question

我正在尝试为我的应用程序实现这个 plunk 示例 http://plnkr.co/edit/p6Dt3yvTq40Vn56AKiqC?p=preview。这是客户端：

$scope.fetch = function($select, $event) {
    if ($scope.loading) {
      return;
    }
    // no event means first load!
    if (!$event) {
        $scope.page = 1;
      $scope.items = [];
    } else {
        //$event.stopPropagation();
      //$event.preventDefault();
        $scope.page += 1;
    }

    $scope.loading = true;
    $http({
        method: 'GET',
      url: 'http://localhost/search/books',
      params: {
        q: $select.search,
        page: $scope.page
      }
    }).then(function(books) {
        $scope.items = $scope.items.concat(books.data.items);
    })['finally'](function() {
        $scope.loading = false;
    });
  };

但是一旦我到达结果的末尾，就会出现一个循环，并且滚动会继续获取我的数据库和 return 一个空数组。

在我的后端，我会在达到限制时发送一个值，但是一旦达到限制，我如何才能停止客户端的滚动？谢谢

Answer 1

$scope.search = 'not specified';
$scope.limit = false;

$scope.fetch = function($select, $event) {
    if ($scope.loading) {
      return;
    }
    // no event means first load!
    if (!$event) {
        $scope.page = 1;
      $scope.items = [];
    } else {
        //$event.stopPropagation();
      //$event.preventDefault();
        $scope.page += 1;
    }

    if($scope.search != $select.search || !$scope.limit)
    {
      $scope.search = $select.search;
      $scope.loading = true;
        $http({
        method: 'GET',
        url: 'https://api.github.com/search/repositories',
        params: {
            q: $select.search,
          page: $scope.page
        }
      }).then(function(resp) {
        $scope.items = $scope.items.concat(resp.data.items);
        $scope.limit = resp.data.limitReached;
      })['finally'](function() {
        $scope.loading = false;
      });
    }
};

Angular无限滚动

Angular Infinite scrolling

infinite-scroll

angularjs