CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrappagination
JMK
JMK

Reputation: 28069

Pagination control changes value of model it is bound to to 1

As demonstrated in the code below, the existence of a pagination (from the Angular Directives for Bootstrap library) control changes the value of the model to 1 on the initial load, is there any way around this? I have added a Plunker here.

<!DOCTYPE html>
<html>

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body ng-app="testApp" ng-controller="testCtrl">
    <pagination ng-model="currentPage"></pagination>    
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>

<script>
var testApp = angular.module('testApp', ['ui.bootstrap']);

var testCtrl = function($scope) {
    $scope.currentPage = 4;

    $scope.$watch('currentPage', function(){
        alert($scope.currentPage);
    });
}

testCtrl.$inject = ['$scope'];
testApp.controller('testCtrl', testCtrl);
</script>

</html>

Thanks

Upvotes: 0

Views: 658

Answers (2)

lucuma
lucuma

Reputation: 18339

I believe the issue is you aren't specifing the total number of pages. Try adding total-items="totalItems" to your directive and the directive defaults to 10 items per page. If you only have 10 items it will only show 1. You also need to set the number of items per page.

 <pagination ng-model="currentPage" total-items="totalItems" items-per-page="itemsPerPage"></pagination>   

var testCtrl = function($scope) {
   $scope.currentPage = 4;
   $scope.totalItems = 10;
   $scope.itemPerPage =1;

   $scope.$watch('currentPage', function(){
    alert($scope.currentPage);
   });
 }

Here is a demo: http://plnkr.co/edit/mZsBhzpA5lax883C5ihy?p=preview

Upvotes: 1

user2015707
user2015707

Reputation:

You need to set the total-items attribute for the the directive pagination :

<pagination ng-model="currentPage" total-items="totalItems" items-per-page="itemsPerPage">     </pagination>

Then you need to set the corresponding properties in your controller's scope :

$scope.currentPage = 4;
$scope.totalItems = 10; // For example.
$scope.itemsPerPage = 2;

You can find all the details on the documentation for the pagination directive

Upvotes: 1

Related Questions