angularjs无限滚动显示数据答案

【问题标题】：angularjs infinte scroll displaying dataangularjs无限滚动显示数据
【发布时间】：2014-08-03 10:36:32
【问题描述】：

我在从 json API 检索时遇到了 AngularJS 中无限滚动的一些问题。我知道，我必须将它推送到我尝试过的数组中，而不是重写变量，但随后我的结果消失了。另一件事是滚动函数将被调用太多次，以至于功能将被破坏，因为它无法记录数字 var 或者它会增加太多次，我会错过数据。

这是我所拥有的： index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>API</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
  <script src="script.js"></script>
    <script src="ng-infinite-scroll.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
<body ng-app="httpExample">
  <div ng-controller="FetchController as ctrl">
  <select ng-model="method">
    <option>GET</option>
    <option>JSONP</option>
  </select>
  <input type="text" ng-model="url" size="80"/>
  <button id="fetchbtn" ng-click="fetch()">fetch</button><br>
  <pre>http status code: {{status}}</pre>


  <div class="row">
  <div class="col-sm-6 col-md-4" infinite-scroll="fetch()" infinite-scroll-distance="1" ng-repeat="MovieID in data">
    <div class="thumbnail">
      <img src="{{MovieID.CoverImage}}" alt="...">
      <div class="caption">
        <h3>{{MovieID.MovieTitleClean}}</h3>
      </div>
    </div>
  </div>

</div>

</div>
</body>
</html>

和 script.js

angular.module('httpExample', ['infinite-scroll'])
  .controller('FetchController', ['$scope', '$http', '$templateCache',
    function ($scope, $http, $templateCache) {
      $scope.method = 'GET';
      $scope.url = 'https://yts.re/api/list.json?limit=20&quality=720p&rating=5&sort=seeds&set=1';
      number=1;
      $scope.fetch = function() {
        $scope.code = null;
        $scope.response = null;


$scope.url = 'https://yts.re/api/list.json?limit=30&quality=720p&rating=5&sort=seeds&set=' + number;
        $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
          success(function(data, status) {
            $scope.status = status;
            $scope.data = data.MovieList;
            number++;
            console.log(number);
          }).
          error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
      };
    }]);

【问题讨论】：

我认为你只是在错误的地方重复。尝试在你的 scoller div 中添加 ng-repeat

标签： javascript jquery angularjs infinite-scroll

【解决方案1】：

我刚试过这个希望这会有所帮助。

喜欢查看：

<div class="row">
  <div class="col-sm-6 col-md-4" infinite-scroll="fetch()" infinite-scroll-distance="1" >
    <div class="thumbnail" ng-repeat="MovieID in data">
      <img src="{{MovieID.CoverImage}}" alt="...">
      <div class="caption">
        <h3>{{MovieID.MovieTitleClean}}</h3>
      </div>

      <div style='clear: both;'></div>
    </div>
  </div>

Script.js

angular.module('httpExample', ['infinite-scroll'])
  .controller('FetchController', ['$scope', '$http', '$templateCache',
    function ($scope, $http, $templateCache) {
      $scope.method = 'GET';
      $scope.url = 'https://yts.re/api/list.json?limit=20&quality=720p&rating=5&sort=seeds&set=1';
      number=1;
      $scope.data=[];
      $scope.it=[];
      $scope.fetch = function() {
        $scope.code = null;
        $scope.response = null;


       $scope.url = 'https://yts.re/api/list.json?limit=30&quality=720p&rating=5&sort=seeds&set=' +     number;


        $http({method: $scope.method, url: $scope.url}).
          success(function(data, status) {
            $scope.status = status;
             var items = data.MovieList;
             for (var i = 0; i < items.length; i++) {
               $scope.data.push(items[i]);
           }

            console.log($scope.data);
            number= number+1;
          }).
          error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
      };
    }]);

【讨论】：

是的，我正在试验类似的代码。唯一的问题是滚动时会发生这种情况：prntscr.com/494602 所以我最终会看到重复的电影，而其他电影现在正在播放。而我刚刚做到了。多谢兄弟！ :)

【解决方案2】：

请参考博客http://bluepiit.com/blog/angularjs-infinite-scroll-pagination/，它详细解释了实现无限滚动分页。是的，您需要将结果推送到一个数组中以便它可以呈现。

当你被滚动事件调用时，你需要标记一个标志以防止重复请求，例如-

scope.loadMoreCourses = function () {
if (scope.loadingResult) {
return;
}

一旦你的结果被检索到，你就可以关闭这个标志，此时结果将被渲染，你不会得到更多的滚动底部事件：

scope.pagination.currentPage = scope.pagination.currentPage + 1;
scope.offset = (scope.pagination.currentPage - 1) * scope.pagination.pageSize;
scope.limit = scope.pagination.pageSize;
scope.resultList = CourseService.courses.list({offset:scope.offset, limit:scope.limit});
scope.loadingResult = false;

详情请参考上述博客。

【讨论】：