feat(pagination): add ngDisabled support for the pager

- Add `ngDisabled` support to the pager component Closes #4217 Resolves #2856
angular-ui · Aug 17, 2015 · ba734b4 · ba734b4
1 parent 0b03a01
commit ba734b4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 4 deletions.
diff --git a/src/pagination/docs/readme.md b/src/pagination/docs/readme.md
@@ -85,3 +85,7 @@ For `ng-model`, `total-items`, `items-per-page` and `num-pages` see pagination s
  * `template-url`
   _(Default: 'template/pagination/pager.html') :
   Override the template for the component with a custom provided template
+
+ * `ng-disabled` <i class="glyphicon glyphicon-eye-open"></i>
+  :
+  Used to disable the pager component
diff --git a/src/pagination/pagination.js b/src/pagination/pagination.js
@@ -207,7 +207,8 @@ angular.module('ui.bootstrap.pagination', [])
     scope: {
       totalItems: '=',
       previousText: '@',
-      nextText: '@'
+      nextText: '@',
+      ngDisabled: '='
     },
     require: ['pager', '?ngModel'],
     controller: 'PaginationController',

diff --git a/src/pagination/test/pager.spec.js b/src/pagination/test/pager.spec.js
@@ -256,4 +256,26 @@ describe('pager directive', function() {
     });
   });
 
+  it('disables the component when ng-disabled is true', function() {
+    $rootScope.disable = true;
+
+    element = $compile('<pager total-items="total" ng-disabled="disable" ng-model="currentPage"></pager>')($rootScope);
+    $rootScope.$digest();
+    updateCurrentPage(2);
+
+    expect(getPaginationEl(0)).toHaveClass('disabled');
+    expect(getPaginationEl(-1)).toHaveClass('disabled');
+
+    $rootScope.disable = false;
+    $rootScope.$digest();
+
+    expect(getPaginationEl(0)).not.toHaveClass('disabled');
+    expect(getPaginationEl(-1)).not.toHaveClass('disabled');
+
+    $rootScope.disable = true;
+    $rootScope.$digest();
+
+    expect(getPaginationEl(0)).toHaveClass('disabled');
+    expect(getPaginationEl(-1)).toHaveClass('disabled');
+  });
 });
diff --git a/template/pagination/pager.html b/template/pagination/pager.html
@@ -1,4 +1,4 @@
 <ul class="pager">
-  <li ng-class="{disabled: noPrevious(), previous: align}"><a href ng-click="selectPage(page - 1, $event)">{{::getText('previous')}}</a></li>
-  <li ng-class="{disabled: noNext(), next: align}"><a href ng-click="selectPage(page + 1, $event)">{{::getText('next')}}</a></li>
-</ul>
+  <li ng-class="{disabled: noPrevious()||ngDisabled, previous: align}"><a href ng-click="selectPage(page - 1, $event)">{{::getText('previous')}}</a></li>
+  <li ng-class="{disabled: noNext()||ngDisabled, next: align}"><a href ng-click="selectPage(page + 1, $event)">{{::getText('next')}}</a></li>
+</ul>