AngularJS - A simple infinite scroll

后端未结

关注

 2  1952

予麋鹿

I am trying to write a similar small infinite scroll to the one found here: http://jsfiddle.net/vojtajina/U7Bz9/

I\'ve been able to display the first 5 pieces of dat

相关标签:

2条回答

孤独总比滥情好

2021-01-06 09:28
There are two problems. First of all, what is attr.whenScrolled? Its undefined. Second one - limitTo: 5. You will allways show only 5 elements!

Here you have working code: http://plnkr.co/edit/VszvMnWCGb662azo4wAv?p=preview

What was changed? Your directive is called directiveWhenScrolled so call:
```
scope.$apply(attr.directiveWhenScrolled);
```
instead of
```
scope.$apply(attr.whenScrolled);
```
How lets deal with static limit. Change it into variable (remember about defining default value):
```
<li ng-repeat="i in items | limitTo: limit">{{ i.Title }}</li>
```
And now your loadMore function should look like this:
```
$scope.loadMore = function() {
    $scope.limit += 5;
};
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

野的像风

2021-01-06 09:34

I've found an awesome angularjs 'infinite' scroll solution.

What you need to do is just add an in-view directive in your project and do next stuff:

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>

0 讨论(0)