CODEWITHSUNDEEP
javascriptangularjspaginationangular-ui-bootstrap
hussain
hussain

Reputation: 7093

How to create pagination using ng-repeat with angular-ui-bootstrap?

I want to implement uib-pagination , I have data in $scope.event based on that i want to display pagination but its not showing pagination directive itself , Any idea what is implemented wrong i do not see any error in console. Or any better approach to achieve this task ?

main.html

<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>

Ctrl.js

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

event.json

[{
    "id": 0,
    "value": "Lorem test Ipsuver since the 1500s,but also the leap into electronic typesetting, remaining essentially unchanged."
}, {
    "id": 1,
    "value": "-19170aee171f a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."
}, {
    "id": 2,
    "value": "19-9de6-19170aee171f a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."
}, {
    "id": 3,
    "value": "ee171f a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."
}]

Upvotes: 0

Views: 3300

Answers (1)

Andriy
Andriy

Reputation: 15442

<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>

see plunker: http://plnkr.co/edit/YLCmEoTzhUz312X2htuB?p=preview

Upvotes: 1

Related Questions