feat(pagination): add support for ng-disabled

- Add support for ng-disabled Closes #3956
angular-ui · Jul 19, 2015 · f6edfa5 · f6edfa5
1 parent 2b27dcb
commit f6edfa5
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 9 deletions.
diff --git a/src/pagination/docs/readme.md b/src/pagination/docs/readme.md
@@ -13,6 +13,10 @@ Settings can be provided as attributes in the `<pagination>` or globally configu
  	:
  	Current page number. First page is 1.
 
+ * `ng-disabled` <i class="glyphicon glyphicon-eye-open"></i>
+  :
+  Used to disable the pagination component
+
  * `total-items` <i class="glyphicon glyphicon-eye-open"></i>
  	:
  	Total number of items in all pages.

diff --git a/src/pagination/pagination.js b/src/pagination/pagination.js
@@ -1,5 +1,4 @@
 angular.module('ui.bootstrap.pagination', [])
-
 .controller('PaginationController', ['$scope', '$attrs', '$parse', function ($scope, $attrs, $parse) {
   var self = this,
       ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
@@ -47,7 +46,8 @@ angular.module('ui.bootstrap.pagination', [])
   };
 
   $scope.selectPage = function(page, evt) {
-    if ( $scope.page !== page && page > 0 && page <= $scope.totalPages) {
+    var clickAllowed = !$scope.ngDisabled || !evt;
+    if (clickAllowed && $scope.page !== page && page > 0 && page <= $scope.totalPages) {
       if (evt && evt.target) {
         evt.target.blur();
       }
@@ -86,7 +86,8 @@ angular.module('ui.bootstrap.pagination', [])
       firstText: '@',
       previousText: '@',
       nextText: '@',
-      lastText: '@'
+      lastText: '@',
+      ngDisabled:'='
     },
     require: ['pagination', '?ngModel'],
     controller: 'PaginationController',

diff --git a/src/pagination/test/pagination.spec.js b/src/pagination/test/pagination.spec.js
@@ -7,6 +7,7 @@ describe('pagination directive', function () {
     $rootScope = _$rootScope_;
     $rootScope.total = 47; // 5 pages
     $rootScope.currentPage = 3;
+    $rootScope.disabled = false;
     $document = _$document_;
     element = $compile('<pagination total-items="total" ng-model="currentPage"></pagination>')($rootScope);
     $rootScope.$digest();
@@ -33,6 +34,12 @@ describe('pagination directive', function () {
     $rootScope.$digest();
   }
 
+  function setDisabled(value)
+  {
+    $rootScope.disabled = value;
+    $rootScope.$digest();
+  }
+
   it('has a "pagination" css class', function() {
     expect(element.hasClass('pagination')).toBe(true);
   });
@@ -673,4 +680,29 @@ describe('pagination directive', function () {
     });
   });
 
+  describe('disabled with ngDisable', function () {
+    beforeEach(function() {
+      element = $compile('<pagination total-items="total" ng-model="currentPage" ng-disabled="disabled"></pagination>')($rootScope);
+      $rootScope.currentPage = 3;
+      $rootScope.$digest();
+    });
+
+    it('should not respond to clicking', function() {
+      setDisabled(true);
+      clickPaginationEl(2);
+      expect($rootScope.currentPage).toBe(3);
+      setDisabled(false);
+      clickPaginationEl(2);
+      expect($rootScope.currentPage).toBe(2);
+    });
+
+    it('should change the class of all buttons except selected one', function () {
+      setDisabled(false);
+      expect(getPaginationEl(3).hasClass('active')).toBe(true);
+      expect(getPaginationEl(4).hasClass('active')).toBe(false);
+      setDisabled(true);
+      expect(getPaginationEl(3).hasClass('disabled')).toBe(false);
+      expect(getPaginationEl(4).hasClass('disabled')).toBe(true);
+    });
+  });
 });
diff --git a/template/pagination/pagination.html b/template/pagination/pagination.html
@@ -1,7 +1,7 @@
 <ul class="pagination">
-  <li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(1, $event)">{{getText('first')}}</a></li>
-  <li ng-if="directionLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(page - 1, $event)">{{getText('previous')}}</a></li>
-  <li ng-repeat="page in pages track by $index" ng-class="{active: page.active}"><a href ng-click="selectPage(page.number, $event)">{{page.text}}</a></li>
-  <li ng-if="directionLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(page + 1, $event)">{{getText('next')}}</a></li>
-  <li ng-if="boundaryLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(totalPages, $event)">{{getText('last')}}</a></li>
-</ul>
+  <li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()||ngDisabled}"><a href ng-click="selectPage(1, $event)">{{getText('first')}}</a></li>
+  <li ng-if="directionLinks" ng-class="{disabled: noPrevious()||ngDisabled}"><a href ng-click="selectPage(page - 1, $event)">{{getText('previous')}}</a></li>
+  <li ng-repeat="page in pages track by $index" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}"><a href ng-click="selectPage(page.number, $event)">{{page.text}}</a></li>
+  <li ng-if="directionLinks" ng-class="{disabled: noNext()||ngDisabled}"><a href ng-click="selectPage(page + 1, $event)">{{getText('next')}}</a></li>
+  <li ng-if="boundaryLinks" ng-class="{disabled: noNext()||ngDisabled}"><a href ng-click="selectPage(totalPages, $event)">{{getText('last')}}</a></li>
+</ul>