Javascript 在Angular.js中将ng重复转换为无限滚动

目前，我正在向JSON新闻提要发出http请求。我正在使用数据ng init=init启动加载时的http请求。然而，我想显示只有一篇文章，并有一个无限的滚动。换句话说，我希望在用户了解每篇文章的底部后，加载其他文章

这是我当前的index.html

<section ng-app="sports" ng-controller="main" data-ng-init="init()">
    <div ng-repeat="article in articles | limitTo:2">
        <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2">
            <!-- <h3>{{ article.created }}</h3> -->
            <h1>{{ article.title }}</h1>
            <img class="images afkl-lazy-image" src="{{ article.thumbnail }}">      
            <p ng-bind-html=" article.body | html "></p>
        </div>
    </div>
</section>

---

我会随时回答任何问题。提前谢谢你

您只需向页面添加一个滚动侦听器，捕捉事件并一次在一个页面上加载更多数据：

$scope.currentPage = 0;

$scope.loadPage = function(pageNum){

   $http.get("/data?page=" + pageNum)
      .success(function(response) {
          $scope.currentPage = pageNum;
          $.each(response.node,function(index,item){
              $scope.articles.push(item);
          })

      });
   }}
};

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >=     document.body.offsetHeight) {
       $scope.loadPage($scope.currentPage + 1);

    }
};

您应该真正注入$window服务并使用它：

...controller('mycontroller', function($scope, $window) {
    angular.element($window).bind("scroll", function() {
       ///check to see if you're at the bottom and call method to load data as above
    });
});

---

这个jQuery是如何关联的？请注意，您只是将其添加到当前数组中，因此ng repeat将自动将其添加到页面中。这实际上非常好，但我不明白：$http.get/data？page=+pageNum。所有我的数据都位于/data，查询字符串会做什么？如果您想一次加载列表中的单个项目，您的后端需要知道如何一次只发送一个。通常你会一次做一个页面，比如5个项目，但是你可以在你的后端控制它。如果您只想一次将所有项目发送到前端，但一次只显示一点，则可以将所有项目存储在一个名为“allItems”的数组中，例如，在滚动处理程序中，只需将一个项目一次复制到displayedItems数组中。然后在你的ng-repeat中使用它。谢谢你的快速回复。我认为在前端处理它是我最好的选择。

...controller('mycontroller', function($scope, $window) {
    angular.element($window).bind("scroll", function() {
       ///check to see if you're at the bottom and call method to load data as above
    });
});