fix(pagination): handle currentPage number as string

angular-ui · Jul 23, 2013 · b1fa7bb · b1fa7bb
1 parent 3e30cd9
commit b1fa7bb
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 26 deletions.
diff --git a/src/pagination/docs/demo.html b/src/pagination/docs/demo.html
@@ -15,6 +15,6 @@ <h4>Pager</h4>
 
     <hr />
     <h4>Limit the maximimum visible page-buttons</h4>
-    <pagination num-pages="bigNoOfPages" current-page="bigCurrentPage" max-size="maxSize" class="pagination-mini" boundary-links="true"></pagination>
-    <pagination rotate="false" num-pages="bigNoOfPages" current-page="bigCurrentPage" max-size="maxSize" class="pagination-mini" boundary-links="true"></pagination>
+    <pagination num-pages="bigNoOfPages" current-page="bigCurrentPage" max-size="maxSize" class="pagination-small" boundary-links="true"></pagination>
+    <pagination rotate="false" num-pages="bigNoOfPages" current-page="bigCurrentPage" max-size="maxSize" class="pagination-small" boundary-links="true"></pagination>
 </div>
diff --git a/src/pagination/pagination.js b/src/pagination/pagination.js
@@ -1,22 +1,25 @@
 angular.module('ui.bootstrap.pagination', [])
 
-.controller('PaginationController', ['$scope', function (scope) {
+.controller('PaginationController', ['$scope', function ($scope) {
 
-  scope.noPrevious = function() {
-    return scope.currentPage === 1;
+  this.currentPage = 1;
+
+  this.noPrevious = function() {
+    return this.currentPage === 1;
   };
-  scope.noNext = function() {
-    return scope.currentPage === scope.numPages;
+  this.noNext = function() {
+    return this.currentPage === $scope.numPages;
   };
 
-  scope.isActive = function(page) {
-    return scope.currentPage === page;
+  this.isActive = function(page) {
+    return this.currentPage === page;
   };
 
-  scope.selectPage = function(page) {
-    if ( ! scope.isActive(page) && page > 0 && page <= scope.numPages) {
-      scope.currentPage = page;
-      scope.onSelectPage({ page: page });
+  var self = this;
+  $scope.selectPage = function(page) {
+    if ( ! self.isActive(page) && page > 0 && page <= $scope.numPages) {
+      $scope.currentPage = page;
+      $scope.onSelectPage({ page: page });
     }
   };
 }])
@@ -43,7 +46,7 @@ angular.module('ui.bootstrap.pagination', [])
     controller: 'PaginationController',
     templateUrl: 'template/pagination/pagination.html',
     replace: true,
-    link: function(scope, element, attrs) {
+    link: function(scope, element, attrs, paginationCtrl) {
 
       // Setup configuration parameters
       var boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$eval(attrs.boundaryLinks) : paginationConfig.boundaryLinks;
@@ -66,7 +69,8 @@ angular.module('ui.bootstrap.pagination', [])
 
       scope.$watch('numPages + currentPage + maxSize', function() {
         scope.pages = [];
-
+        paginationCtrl.currentPage = parseInt(scope.currentPage, 10);
+
         // Default page limits
         var startPage = 1, endPage = scope.numPages;
         var isMaxSized = ( angular.isDefined(scope.maxSize) && scope.maxSize < scope.numPages );
@@ -75,7 +79,7 @@ angular.module('ui.bootstrap.pagination', [])
         if ( isMaxSized ) {
           if ( rotate ) {
             // Current page is displayed in the middle of the visible ones
-            startPage = Math.max(scope.currentPage - Math.floor(scope.maxSize/2), 1);
+            startPage = Math.max(paginationCtrl.currentPage - Math.floor(scope.maxSize/2), 1);
             endPage   = startPage + scope.maxSize - 1;
 
             // Adjust if limit is exceeded
@@ -85,7 +89,7 @@ angular.module('ui.bootstrap.pagination', [])
             }
           } else {
             // Visible pages are paginated with maxSize
-            startPage = ((Math.ceil(scope.currentPage / scope.maxSize) - 1) * scope.maxSize) + 1;
+            startPage = ((Math.ceil(paginationCtrl.currentPage / scope.maxSize) - 1) * scope.maxSize) + 1;
 
             // Adjust last page if limit is exceeded
             endPage = Math.min(startPage + scope.maxSize - 1, scope.numPages);
@@ -94,7 +98,7 @@ angular.module('ui.bootstrap.pagination', [])
 
         // Add page number links
         for (var number = startPage; number <= endPage; number++) {
-          var page = makePage(number, number, scope.isActive(number), false);
+          var page = makePage(number, number, paginationCtrl.isActive(number), false);
           scope.pages.push(page);
         }
 
@@ -113,23 +117,23 @@ angular.module('ui.bootstrap.pagination', [])
 
         // Add previous & next links
         if (directionLinks) {
-          var previousPage = makePage(scope.currentPage - 1, previousText, false, scope.noPrevious());
+          var previousPage = makePage(paginationCtrl.currentPage - 1, previousText, false, paginationCtrl.noPrevious());
           scope.pages.unshift(previousPage);
 
-          var nextPage = makePage(scope.currentPage + 1, nextText, false, scope.noNext());
+          var nextPage = makePage(paginationCtrl.currentPage + 1, nextText, false, paginationCtrl.noNext());
           scope.pages.push(nextPage);
         }
 
         // Add first & last links
         if (boundaryLinks) {
-          var firstPage = makePage(1, firstText, false, scope.noPrevious());
+          var firstPage = makePage(1, firstText, false, paginationCtrl.noPrevious());
           scope.pages.unshift(firstPage);
 
-          var lastPage = makePage(scope.numPages, lastText, false, scope.noNext());
+          var lastPage = makePage(scope.numPages, lastText, false, paginationCtrl.noNext());
           scope.pages.push(lastPage);
         }
 
-        if ( scope.currentPage > scope.numPages ) {
+        if ( paginationCtrl.currentPage > scope.numPages ) {
           scope.selectPage(scope.numPages);
         }
       });
@@ -174,15 +178,16 @@ angular.module('ui.bootstrap.pagination', [])
 
       scope.$watch('numPages + currentPage', function() {
         scope.pages = [];
+        paginationCtrl.currentPage = parseInt(scope.currentPage, 10);
 
         // Add previous & next links
-        var previousPage = makePage(scope.currentPage - 1, previousText, scope.noPrevious(), true, false);
+        var previousPage = makePage(paginationCtrl.currentPage - 1, previousText, paginationCtrl.noPrevious(), true, false);
         scope.pages.unshift(previousPage);
 
-        var nextPage = makePage(scope.currentPage + 1, nextText, scope.noNext(), false, true);
+        var nextPage = makePage(paginationCtrl.currentPage + 1, nextText, paginationCtrl.noNext(), false, true);
         scope.pages.push(nextPage);
 
-        if ( scope.currentPage > scope.numPages ) {
+        if ( paginationCtrl.currentPage > scope.numPages ) {
           scope.selectPage(scope.numPages);
         }
       });

diff --git a/src/pagination/test/pager.spec.js b/src/pagination/test/pager.spec.js
@@ -101,6 +101,18 @@ describe('pager directive with default configuration', function () {
     expect($rootScope.currentPage).toBe(2);
     expect($rootScope.selectPageHandler).toHaveBeenCalledWith(2);
   });
+
+  describe('when `current-page` is not a number', function () {
+    it('handles string', function() {
+      $rootScope.currentPage = '1';
+      $rootScope.$digest();
+      expect(element.find('li').eq(0).hasClass('disabled')).toBe(true);
+
+      $rootScope.currentPage = '05';
+      $rootScope.$digest();
+      expect(element.find('li').eq(-1).hasClass('disabled')).toBe(true);
+    });
+  });
 });
 
 describe('setting pagerConfig', function() {

diff --git a/src/pagination/test/pagination.spec.js b/src/pagination/test/pagination.spec.js
@@ -115,6 +115,18 @@ describe('pagination directive with default configuration', function () {
     expect($rootScope.currentPage).toBe(2);
     expect($rootScope.selectPageHandler).toHaveBeenCalledWith(2);
   });
+
+  describe('when `current-page` is not a number', function () {
+    it('handles string', function() {
+      $rootScope.currentPage = '2';
+      $rootScope.$digest();
+      expect(element.find('li').eq(2).hasClass('active')).toBe(true);
+
+      $rootScope.currentPage = '04';
+      $rootScope.$digest();
+      expect(element.find('li').eq(4).hasClass('active')).toBe(true);
+    });
+  });
 });
 
 describe('pagination directive with max size option', function () {