渐进滚动angularjs

Question

我有一个数据库女巫包含1000个产品。我有一个列表，一次显示10个产品。这个网格是可滚动的。我想加载10个产品10. 用angularjs做这件事的最好方法是什么？我正在寻找一种需要最短代码的方法。 谢谢

Answer 1

这个概念被称为分页，如果你想在较少的时间内实现这一点，那么你必须去任何可用的模块。

我已经使用Infinite Scroll它非常易于使用，并且可以帮助您在任何时候实施。

Answer 2

您正在寻找称为“无限滚动”的库。您可以在这里找到这个程序https://github.com/ifwe/infinite-scroll

凡在控制器，你把这个代码：

var app = angular.module('MyApp', ['tagged.directives.infiniteScroll']); 
app.controller('MainController', ['$scope', '$http', function($scope, $http) { 
    $scope.page = 1; 
    $scope.items = []; 
    $scope.fetching = false; 

    // Fetch more items 
    $scope.getMore = function() { 
    $scope.page++; 
    $scope.fetching = true; 
    $http.get('/my/endpoint', { page : $scope.page }).then(function(items) { 
     $scope.fetching = false; 
     // Append the items to the list 
     $scope.items = $scope.items.concat(items); 
    }); 
    }; 
}]); 

这是你的看法：

<div ng-app="MyApp"> 
    <div ng-controller="MainController"> 
    <ul tagged-infinite-scroll="getMore()"> 
     <li ng-repeat="item in items"> 
     {{ item.title }} 
     </li> 
    </ul> 
    </div> 
</div> 

一旦检测到您滚动是在结束它会调用函数来加载新项目的ng-repeat项目。请记住添加到端点限制和偏移来加载其余数据，而不是每次都是相同的数据。