AngularJS – 一个简单的无限滚动

发布时间：2020-12-17 17:49:10 所属栏目：安全来源：网络整理

导读：我试图写一个类似的小无限滚动到这里找到的： http://jsfiddle.net/vojtajina/U7Bz9/ 我已经能够显示前5个数据,但是在滚动时,其他项目没有显示. HTML： div id="fixed" directive-when-scrolled="loadMore()" ul li ng-repeat="i in items | limitTo: 5"{{ i

我试图写一个类似的小无限滚动到这里找到的： 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

解决方法

有两个问题.首先,什么是attr.whenScrolled？它未定义.第二个 – 限制：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;
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!