AngularJS — простая бесконечная прокрутка

Я пытаюсь написать небольшую бесконечную прокрутку, аналогичную той, что найдена здесь: http://jsfiddle.net/vojtajina/U7Bz9/

Мне удалось отобразить первые 5 фрагментов данных, однако при прокрутке дальнейшие элементы не отображаются.

HTML:

<div id="fixed" directive-when-scrolled="loadMore()">
  <ul>
    <li ng-repeat="i in items | limitTo: 5">{{ i.Title }}</li>
  </ul>  
</div>

JS:

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.items = [
    {
       "Title":"Home"
    },
    {
       "Title":"Contact"
    },
    {
       "Title":"Help"
    },
    {
       "Title":"About"
    },
    {
       "Title":"Our Offices"
    },
    {
       "Title":"Our Locations"
    },
    {
       "Title":"Meet the Team"
    }
    ,
    {
       "Title":"Our Mission"
    },
    {
       "Title":"Join Us"
    },
    {
       "Title":"Conferences"
    },
    {
       "Title":"Tables"
    },
    {
       "Title":"Chairs"
    } 
  ];

    var counter = 0;
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
            $scope.items.push({id: counter});
            counter += 10;
        }
    };

    $scope.loadMore();


});


app.directive("directiveWhenScrolled", function () {
  return function(scope, elm, attr) {
        var raw = elm[0];

        elm.bind('app', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

Вот плункер: http://plnkr.co/edit/6ggYGZx6scSoJ5PNhj67?p=preview


angularjs infinite-scroll angularjs-directive angularjs-ng-repeat
person Oam Psy    schedule 08.07.2014    source источник
comment
вы видели это?   -  person Mohammad Sepahvand    schedule 08.07.2014
comment
@MohammadSepahvand - Да, у меня есть, это выглядит хорошо, хотя это требует от меня / моего приложения сделать еще один HTTP-запрос к файлу .JS, и я действительно хочу избежать этого, поскольку у меня и так достаточно.   -  person Oam Psy    schedule 08.07.2014

Ответы (2)


arrow_upward
12
arrow_downward

Есть две проблемы. Прежде всего, что такое attr.whenScrolled? Это не определено. Второй - limitTo: 5. Вы всегда будете показывать только 5 элементов!

Здесь у вас есть рабочий код: http://plnkr.co/edit/VszvMnWCGb662azo4wAv?p=preview.

Что было изменено? Ваша директива называется directiveWhenScrolled, поэтому позвоните:

scope.$apply(attr.directiveWhenScrolled);

вместо

scope.$apply(attr.whenScrolled);

Как давайте работать со статическим пределом. Измените его на переменную (помните об определении значения по умолчанию):

<li ng-repeat="i in items | limitTo: limit">{{ i.Title }}</li>

И теперь ваша функция loadMore должна выглядеть так:

$scope.loadMore = function() {
    $scope.limit += 5;
};
person Kasyx    schedule 08.07.2014

arrow_upward
1
arrow_downward

Я нашел отличное решение angularjs "бесконечное" решение прокрутки< /а>.

Что вам нужно сделать, так это просто добавить директиву in-view в свой проект и делать следующее. :

angular.module('infinitScrollApp', ['angular-inview'])
       .controller('infinitScrollController', infinitScrollController);
       
function infinitScrollController($scope) {
  $scope.limit = 10;
  $scope.items = Array.from(Array(1000).keys());
  
  $scope.loadMore = function (last, inview) {
      if (last && inview) {
          $scope.limit += 10;
      }
  }
}
.infinit-scroll-container {
  height: 150px;
  overflow-y:scroll
}
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-inview/3.0.0/angular-inview.min.js">
    </script>
  </head>

  <body ng-app="infinitScrollApp">
    <div class="infinit-scroll-container">
        <ul ng-controller="infinitScrollController">
            <li ng-repeat="item in items | limitTo: limit" in-view="loadMore($last, $inview)">
            {{item}}
            </li>
        </ul>
    </div>
  </body>
</html>

person itim    schedule 16.09.2018
comment
Есть ли причина, по которой ответ получает -1? - person Adrian Grygutis; 11.02.2020
comment
Я понятия не имею, почему этот ответ получает -1. Для меня этот подход работает отлично :) - person itim; 11.02.2020