AngularJS - 一个简单的无限滚动

我试图写一个类似小无限滚动到一个在这里找到：http://jsfiddle.net/vojtajina/U7Bz9/AngularJS - 一个简单的无限滚动

我已经能够显示前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); 
      } 
     }); 
    }; 
});

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

来源

2014-07-08 Oam Psy

你见过[这]（https://github.com/ sroze/ngInfiniteScroll）？ –

@MohammadSepahvand - 是的，我看起来不错，虽然它要求我/我的应用程序向.JS文件发出另一个HTTP请求，但我真的想避免这种情况，因为我已经足够了。 –

有两个问题。首先，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; 
};

来源

2014-07-08 09:36:39 Kasyx

感谢您的详细解决方案，这解决了我的问题。 –

AngularJS - 一个简单的无限滚动

回答

相关问题