如何在AngularJS中进行分页?

前端之家收集整理的这篇文章主要介绍了如何在AngularJS中进行分页?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个约1000项内存中的数据集,我试图创建一个寻呼机
这个数据集,但我不知道如何做到这一点。

我使用自定义过滤器功能来过滤结果,这很好,但不知何故,我需要得到的页数。

任何线索?

Angular UI Bootstrap – 分页指令

查看UI Bootstrappagination directive.我最终使用它,而不是什么是张贴在这里,因为它有足够的功能,我目前的使用,并有一个thorough test spec伴随它。

视图

<!-- table here -->

<pagination 
  ng-model="currentPage"
  total-items="todos.length"
  max-size="maxSize"  
  boundary-links="true">
</pagination>

<!-- items/page select here if you like -->

控制器

todos.controller("TodoController",function($scope) {
   $scope.filteredTodos = [],$scope.currentPage = 1,$scope.numPerPage = 10,$scope.maxSize = 5;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:"todo "+i,done:false});
    }
  };
  $scope.makeTodos(); 

  $scope.$watch("currentPage + numPerPage",function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage),end = begin + $scope.numPerPage;

    $scope.filteredTodos = $scope.todos.slice(begin,end);
  });
});

我做了一个working plunker供参考。

旧版本:

视图

<!-- table here -->

<div data-pagination="" data-num-pages="numPages()" 
  data-current-page="currentPage" data-max-size="maxSize"  
  data-boundary-links="true"></div>

<!-- items/page select here if you like -->

控制器

todos.controller("TodoController",done:false});
    }
  };
  $scope.makeTodos(); 

  $scope.numPages = function () {
    return Math.ceil($scope.todos.length / $scope.numPerPage);
  };

  $scope.$watch("currentPage + numPerPage",end);
  });
});

我做了一个working plunker供参考。

猜你在找的Angularjs相关文章