当前位置: 首页 > 知识库问答 >
问题:

如何在AngularJS中进行分页?

诸葛乐逸
2023-03-14

共有1个答案

司徒志强
2023-03-14

查看UI引导程序的分页指令。我最终使用了它,而不是这里发布的东西,因为它有足够的特性适合我当前的使用,并且有一个完整的测试规范伴随它。

<!-- 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);
  });
});

我做了一个工作柱塞供参考。

<!-- 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", 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.numPages = function () {
    return Math.ceil($scope.todos.length / $scope.numPerPage);
  };

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

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

我做了一个工作柱塞供参考。

 类似资料:
  • 问题内容: 我有一个内存中大约有1000个项目的数据集,正在尝试为此数据集创建一个传呼机,但是我不确定如何执行此操作。 我使用的是自定义过滤器功能来过滤结果,效果很好,但是以某种方式我需要获取页面数。 有什么线索吗? 问题答案: 查看UI Bootstrap的分页指令。我最终使用了它,而不是使用此处发布的内容,因为它具有当前使用的足够功能,并且具有详尽的测试规范。 视图 控制者 我做了一个工作的小

  • 问题内容: AngularJS可以做的有趣的事情之一是将过滤器应用于特定的数据绑定表达式,这是一种方便的方法,例如,应用区域性特定的货币或模型属性的日期格式。在范围上具有计算属性也很好。问题在于这些功能都不适用于双向数据绑定方案- 从作用域到视图仅单向数据绑定。在一个本来不错的图书馆中,这似乎是一个明显的遗漏-还是我错过了什么? 在KnockoutJS中,我可以创建一个读/写计算属性,该属性允许我

  • 问题内容: 在AngularJS部分中,我如下遍历条目列表: 的内容有一些换行符,AngularJS会忽略它们。如何使其保留换行符? 问题答案: 这只是基本的HTML。AngularJS对此不会做任何改变。您可以改用标签: 或使用CSS: 如果包含HTML代码,则可以使用: 不要忘记包括ngSanitize:

  • 问题内容: 我正在为教练创建一个网站,以通过使用社交媒体帮助人们拥有更健康的生活。目前,我正在通过ExpressJS服务器中的OAuth(前端为AngularJS)访问Twitter。 从AngularJS网站: 在200到299之间的响应状态代码被视为成功状态,并将导致调用成功回调。请注意,如果响应是重定向,则XMLHttpRequest将透明地跟随它,这意味着不会为此类响应调用错误回调。 我的

  • 问题内容: 我想使用sails.js,mongodb和waterline-ORM创建分页表。 在sails.js中是否有任何特定的分页方法? 问题答案: http://sailsjs.org/#/documentation/concepts/ORM/Querylanguage.html 如果您希望分页异步工作,则使用JQUERY 和在服务器上非常容易 在水线和航行文档中有很多信息。

  • 问题内容: 我正在用Node.js和猫鼬编写一个Webapp。如何对通话结果进行分页?我想要一个与SQL 相当的功能。 问题答案: 在通过Rodolphe提供的信息仔细研究了Mongoose API之后,我想出了以下解决方案: