导航限制批量角度重复

时间:2015-01-03 14:50:31

标签: javascript json angularjs angularjs-ng-repeat

我的HTML中有ngRepeat limitTo。这将显示前x个用户 - 主要是对表进行分页。我现在需要能够显示下一批x用户。我已添加了几个锚点,可以转到上一页或下一页(功能附加到点击) 我现在不确定如何通过这些函数操纵ngRepeat来实际显示正确的一批用户。

HTML

<div ng-repeat="user in users | limitTo:paginate.size">
  {{user.name}}
  {{user.email}}
</div>

<ul class="pagination">
  <li><a href="" data-ng-click="prevPage()">left</a></li>
  <li><a href="" data-ng-click="nextPage()">right</a></li>
</ul>

JS

$scope.users = //full users object here

$scope.paginate = {};
$scope.paginate.size = 10;

$scope.prevPage = function(){
  //load the previous 10 users
}

$scope.nextPage = function(){
  //load the next 10 users
}

1 个答案:

答案 0 :(得分:0)

您应该添加另一个过滤器(或简称自定义过滤器),例如

<div ng-repeat="user in users | filter:getList(user, index)">
  {{user.name}}
  {{user.email}}
</div>

然后在范围

$scope.users = //full users object here

$scope.paginate = {};
$scope.paginate.size = 10;
$scope.paginate.start = 0;

$scope.prevPage = function(){
  //load the previous 10 users
    if ($scope.paginate.start) {
        $scope.paginate.start -= $scope.paginate.size;
    }
}

$scope.nextPage = function(){
  //load the next 10 users
    $scope.paginate.start += $scope.paginate.size;
}

$scope.getList = function (user, index) {
    return (index >= $scope.paginate.start && index < $scope.paginate.start + $scope.paginate.size);
};