AngularJS - 一个简单的无限滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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);
}
});
};
});
答案
有两个问题。首先，什么是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;
};
另一答案
我发现了一个很棒的angularjs 'infinite' scroll solution。
你需要做的只是在你的项目中添加一个in-view directive并做下一件事：
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>以上是关于AngularJS - 一个简单的无限滚动的主要内容，如果未能解决你的问题，请参考以下文章