AngularJS - 一个简单的无限滚动 [英] AngularJS - A simple infinite scroll

问题描述

我正在尝试为此处找到的一个类似的小型无限滚动:http://jsfiddle.net/vojtajina/U7Bz9/

我已经能够显示前 5 条数据，但是在滚动时，没有显示其他项目.

HTML:

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

JS:

var app = angular.module('app', []);app.controller('MainCtrl', function($scope) {$scope.name = '世界';$scope.items = [{标题":家"},{标题":联系方式"},{标题":帮助"},{标题":关于"},{标题":我们的办公室"},{标题":我们的位置"},{标题":认识团队"},{《标题》:《我们的使命》},{《标题》:《加入我们》},{标题":会议"},{标题":表格"},{标题":椅子"}];无功计数器 = 0;$scope.loadMore = function() {for (var i = 0; i <5; i++) {$scope.items.push({id: counter});计数器 += 10;}};$scope.loadMore();});app.directive("directiveWhenScrolled", function () {返回函数(范围，榆树，属性){var raw = elm[0];elm.bind('app', function() {if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {scope.$apply(attr.whenScrolled);}});};});

这是一个 plunker:http://plnkr.co/edit/6ggYGZx6scSoJ5PNhj67?p=preview

解决方案

有两个问题.首先，什么是attr.whenScrolled?它的未定义.第二个 - limitTo: 5.您将始终只显示 5 个元素！

这里有工作代码:http://plnkr.co/edit/VszvMnWCGb662azo4wAv?p=preview

发生了什么变化?你的指令被称为 directiveWhenScrolled 所以调用:

scope.$apply(attr.directiveWhenScrolled);

代替

scope.$apply(attr.whenScrolled);

如何处理静态限制.把它改成变量(记得定义默认值):

{{ i.Title }}

现在你的 loadMore 函数应该是这样的:

$scope.loadMore = function() {$scope.limit += 5;};

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 data, however on scroll, the further items are not being displayed.

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);
            }
        });
    };
});

Here's a plunker: http://plnkr.co/edit/6ggYGZx6scSoJ5PNhj67?p=preview

解决方案

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;
};

这篇关于AngularJS - 一个简单的无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！