我的应用程序中有分页功能。我每页显示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="«" data-next-text="»"></pagination>
代码参考:
http://jsfiddle.net/eqCWL/224/
最佳答案
在您的提琴演奏中,您使用的是较旧的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
关于css - 单独列中的AngularJS分页,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29556899/