如何使用angular-ui-bootstrap的ng-repeat创建分页?

时间:2016-09-16 16:27:01

标签: javascript angularjs pagination angular-ui-bootstrap

我想实现uib-pagination,我在for item in myDict: myDict[item] = myDict[item] + 1 中有数据基于我想要显示分页但是它没有显示分页指令本身,任何想法实现错误我没有在控制台中看到任何错误。或者更好的方法来完成这项任务?

main.html中

$scope.event

Ctrl.js

<div class="panel-body display-logs" scroll-bottom="event">
                <ul style="list-style: none;">
                    <li ng-repeat="message in event track by message.id" ng-class="{lastItem: $last}"><span><strong>Log:</strong></span><span>{{message.value}}</span></li>
                </ul>
            </div>

    <uib-pagination total-items="event.length" ng-model='currentPage' items-per-page='pageSize' boundary-links="true">
                </uib-pagination>

event.json

$scope.event = [];
 $scope.pageSize=5,
 $scope.currentPage=1;

1 个答案:

答案 0 :(得分:0)

<div class="panel-body display-logs" scroll-bottom="event">
  <ul style="list-style: none;">
    <li ng-repeat="message in event | limitTo : pageSize : (currentPage - 1) * pageSize track by message.id" 
        ng-class="{lastItem: $last}">
      <strong>{{ message.id }} --- Log: </strong>
      <span>{{ message.value }}</span>
    </li>
  </ul>
</div>

<ul uib-pagination 
    total-items="totalItems" 
    ng-model="currentPage" 
    items-per-page="pageSize"></ul>

请参阅plunker:http://plnkr.co/edit/YLCmEoTzhUz312X2htuB?p=preview