Question

我在我的应用中有分页功能。我每页显示10个元素。现在我想将这10个元素格式化为2列（每1页2x5个元素）。

我不知道如何开始。

<pagination data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" max-size="maxSize" class="pagination-small" data-previous-text="&laquo;" data-next-text="&raquo;"></pagination>

代码参考：

http://jsfiddle.net/eqCWL/224/

Answer 1

在你的小提琴中，你使用的是较旧的bootstrap2 css，所以我将在这里使用它来寻找解决方案：

首先，您需要阅读bootstrap documentation on scaffolding/grid system

格式化HTML以显示两行中的两个列表：

<div class="row">
  <div class="span6">
      <li>{{data.name}}</li>
  </div>
  <div class="span6">
      <li>{{data.name}}</li>
  </div>
</div>

然后，您需要设置第一个ng-repeat以仅显示一半项目：

ng-repeat="data in filtered = (list | filter:search) | 
startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit/2"

通知limitTo:entryLimit/2 第二个展示其余部分：

ng-repeat="data in filtered = (list | filter:search) | 
startFrom:(currentPage-1)*entryLimit + entryLimit/2 | limitTo:entryLimit/2"

您需要更改startFrom过滤器，以便稍后启动entryLimit / 2项：

startFrom:(currentPage-1)*entryLimit + entryLimit/2

您可以测试一个工作示例here

AngularJS分页中的分页

1 个答案: