在角度 1 中，我如何对 ng-repeat 进行分页? [英] In angular 1, how can I paginate my ng-repeats?

问题描述

我目前使用过滤器将 ng-repeat 限制为 5，但我想知道如何对数据进行分页.

我有可变数量的项目需要重复，我希望用户能够以合理的块查看这些项目 - 一次五个，带有下一个/上一个按钮或页码跳过.是否有非常适合此任务的角度指令?使用 mongoose 查询从后端发送可管理的数据块会更简单吗?

解决方案

是的，AngularJS 有一个很好的指令，叫做 dirPagination.您可以对 tables 和几乎所有您需要的内容进行分页.

在 Github 上查看，如果您想观看演示，Plunker.

下载Javascript 和模板Html 文件后，您需要执行一些基本步骤:

1. 在您的 Javascript 文件中，输入:

   $scope.currentPage = 1;//应该开始分页的页面.
   $scope.pageSize = 5;//每页的条目数限制.

2. 更改您的 div:

   <div ng-repeat="job in jobs | limitTo:5"> 到 <div dir-paginate="job in jobs | filter:q | itemsPerPage:pageSize" current-page="currentPage"></div>

3. 在您的 html 文件中添加分页控件(确保为模板设置正确的 url).

   <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="dirPagination.tpl.html"></dir-分页控件>

更新

我制作了一个 plnkr 来演示它在您的情况下的外观.请看一下.

I am currently limiting my ng-repeat to 5 using a filter, but I'm wondering how I can paginate the data.

<div ng-repeat="job in jobs | limitTo:5">

I have a variable number of items that I am ng-repeating through, and I would like the user to be able to view these items in reasonable chunks -- five at a time, with next/previous buttons or page numbers to skip through. Is there an angular directive well-suited for this task? Would it be simpler to handle sending manageable chunks of data from the backend with a mongoose query?

解决方案

Yes, there's a nice directive for AngularJS called dirPagination. You can paginate tables and almost everything that you need.

Look at it on Github and if you want to see a demo, Plunker.

After you downloaded the Javascript and template Html files, you need to do some basic steps:

1. In your Javascript file, put:

   $scope.currentPage = 1; // The page that should start the pagination.
   $scope.pageSize = 5; // The limit of items per page.

2. Change your div:

   <div ng-repeat="job in jobs | limitTo:5"> to <div dir-paginate="job in jobs | filter:q | itemsPerPage: pageSize" current-page="currentPage"></div>

3. Add the pagination controls in your html file (Be sure to set the correct url for the template).

   <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="dirPagination.tpl.html"></dir-pagination-controls>

UPDATE

I made a plnkr to demonstrate how it would look in your case. Please, take a look.

这篇关于在角度 1 中，我如何对 ng-repeat 进行分页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！