Как создать бесконечный свиток в angularjs

Question

У меня есть массив ответов, пришедших с сервера с нумерацией страниц. Я хочу, чтобы каждый раз, когда пользователь прокручивал страницу для большего результата, данные следующей страницы должны быть загружены. До тех пор, пока пользователь не прокручивает вниз, данные поступают только со страницы 1, а когда пользователь прокручивает страницу вниз, ее следует изменить на 2,3,4 и т. Д. Может ли кто-нибудь помочь мне создать бесконечный свиток в angularjs.

Answer 1

Вы можете сослаться на мой образец, который я подаю на таблицу

HTML-код:

<div ng-controller="appController">

    <h1>This is my {{title}} Items: {{numberToDisplay}}/{{totalDisplay}}</h1>
    <div class="constrained">
        <table class="table table-striped" id="loggingTable" infinite-scroll="loadMore()" infinite-scroll-container='".constrained"' infinite-scroll-distance="1" infinite-scroll-parent="true">
            <tr data-ng-show="logEventFilter.length === 0">
                <td class="center" colspan="3">Nobody is here</td>
            </tr>

            <tr data-ng-repeat="logEvent in logEventFilter = (logEvents | limitTo:numberToDisplay) track by $index">
                <td> {{$index}} </td>
                <td> {{logEvent.name}} </td>
                <td> {{numberToDisplay}} </td>
            </tr>
        </table>
    </div>

</div>

Код Angularjs:

   var app = angular.module('app', ['infinite-scroll'])
       .controller('appController', appController);

   appController.$inject = ['$scope', '$window'];

   function appController($scope, $window) {

       $scope.title = "infinite scroll example";
       $scope.numberToDisplay = 20;
                $scope.totalDisplay = 500;
       $scope.logEvents = [];
       for (var i = 0; i < $scope.totalDisplay; i++) {
           $scope.logEvents.push({
               name: "Hello, my name is " + i
           });
       }

       $scope.loadMore = function() {
           if ($scope.numberToDisplay + 5 < $scope.logEvents.length) {
               $scope.numberToDisplay += 5;
           } else {
               $scope.numberToDisplay = $scope.logEvents.length;
           }
       };
   };

образец прокрутки бесконечен

Answer 2

вы можете вы угловой пользовательский интерфейс прокрутки

Это помогает при загрузке данных, когда пользователь выполняет прокрутку вниз.