css - 单独列中的 AngularJS 分页

Question

我的应用程序中有分页功能。我每页显示 10 个元素。现在我想将这 10 个元素格式化为 2 列(每 1 页 2x 5 个元素)。

我不知道如何开始。

<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

在您的 fiddle 中，您使用的是较旧的 bo​​otstrap2 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