Преобразование ng-повторения в бесконечный свиток в Angular.js

0

В настоящее время в Angular я делаю http-запрос в новостной ленте JSON. Я инициирую HTTP-запрос при загрузке с помощью data-ng-init = "init()". Однако я хотел бы показать только одну статью и иметь бесконечный свиток. Другими словами, я хотел бы, чтобы другие статьи загружались, как только пользователь попадает в нижнюю часть каждой статьи.

Это мой текущий 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>

И вот мой angularApp.js:

app.controller('main', function($scope, $http){
    $scope.init = function(){
        $http.get("/data")
        .success(function(response) {
            $scope.articles = [];
            $.each(response.node,function(index,item){
                $scope.articles.push(item);
            })
            $scope.articles.reverse();
        });
    }}
);

Я буду рядом, чтобы ответить на любые вопросы. Заранее спасибо!!

  • 3
    Как это связано с jQuery?
Теги:
http

1 ответ

0

Вам просто нужно добавить прослушиватель прокрутки на страницу, поймать событие и загрузить больше данных на одну "страницу" за раз:

$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
    });
});
Поделиться
  • 0
    Обратите внимание, что вы просто добавляете в текущий массив, так что ng-repeat автоматически позаботится о добавлении его на страницу.
  • 0
    На самом деле это действительно здорово, но я не понимаю: $ http.get ("/ data? Page =" + pageNum). Все мои данные находятся в "/ data", что будет делать строка запроса?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню