Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit f6edfa5

Browse files
TomaszZieleskiewiczwesleycho
authored andcommitted
feat(pagination): add support for ng-disabled
- Add support for ng-disabled Closes #3956
1 parent 2b27dcb commit f6edfa5

File tree

4 files changed

+46
-9
lines changed

4 files changed

+46
-9
lines changed

Diff for: src/pagination/docs/readme.md

+4
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ Settings can be provided as attributes in the `<pagination>` or globally configu
1313
:
1414
Current page number. First page is 1.
1515

16+
* `ng-disabled` <i class="glyphicon glyphicon-eye-open"></i>
17+
:
18+
Used to disable the pagination component
19+
1620
* `total-items` <i class="glyphicon glyphicon-eye-open"></i>
1721
:
1822
Total number of items in all pages.

Diff for: src/pagination/pagination.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
angular.module('ui.bootstrap.pagination', [])
2-
32
.controller('PaginationController', ['$scope', '$attrs', '$parse', function ($scope, $attrs, $parse) {
43
var self = this,
54
ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
@@ -47,7 +46,8 @@ angular.module('ui.bootstrap.pagination', [])
4746
};
4847

4948
$scope.selectPage = function(page, evt) {
50-
if ( $scope.page !== page && page > 0 && page <= $scope.totalPages) {
49+
var clickAllowed = !$scope.ngDisabled || !evt;
50+
if (clickAllowed && $scope.page !== page && page > 0 && page <= $scope.totalPages) {
5151
if (evt && evt.target) {
5252
evt.target.blur();
5353
}
@@ -86,7 +86,8 @@ angular.module('ui.bootstrap.pagination', [])
8686
firstText: '@',
8787
previousText: '@',
8888
nextText: '@',
89-
lastText: '@'
89+
lastText: '@',
90+
ngDisabled:'='
9091
},
9192
require: ['pagination', '?ngModel'],
9293
controller: 'PaginationController',

Diff for: src/pagination/test/pagination.spec.js

+32
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ describe('pagination directive', function () {
77
$rootScope = _$rootScope_;
88
$rootScope.total = 47; // 5 pages
99
$rootScope.currentPage = 3;
10+
$rootScope.disabled = false;
1011
$document = _$document_;
1112
element = $compile('<pagination total-items="total" ng-model="currentPage"></pagination>')($rootScope);
1213
$rootScope.$digest();
@@ -33,6 +34,12 @@ describe('pagination directive', function () {
3334
$rootScope.$digest();
3435
}
3536

37+
function setDisabled(value)
38+
{
39+
$rootScope.disabled = value;
40+
$rootScope.$digest();
41+
}
42+
3643
it('has a "pagination" css class', function() {
3744
expect(element.hasClass('pagination')).toBe(true);
3845
});
@@ -673,4 +680,29 @@ describe('pagination directive', function () {
673680
});
674681
});
675682

683+
describe('disabled with ngDisable', function () {
684+
beforeEach(function() {
685+
element = $compile('<pagination total-items="total" ng-model="currentPage" ng-disabled="disabled"></pagination>')($rootScope);
686+
$rootScope.currentPage = 3;
687+
$rootScope.$digest();
688+
});
689+
690+
it('should not respond to clicking', function() {
691+
setDisabled(true);
692+
clickPaginationEl(2);
693+
expect($rootScope.currentPage).toBe(3);
694+
setDisabled(false);
695+
clickPaginationEl(2);
696+
expect($rootScope.currentPage).toBe(2);
697+
});
698+
699+
it('should change the class of all buttons except selected one', function () {
700+
setDisabled(false);
701+
expect(getPaginationEl(3).hasClass('active')).toBe(true);
702+
expect(getPaginationEl(4).hasClass('active')).toBe(false);
703+
setDisabled(true);
704+
expect(getPaginationEl(3).hasClass('disabled')).toBe(false);
705+
expect(getPaginationEl(4).hasClass('disabled')).toBe(true);
706+
});
707+
});
676708
});

Diff for: template/pagination/pagination.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ul class="pagination">
2-
<li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(1, $event)">{{getText('first')}}</a></li>
3-
<li ng-if="directionLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(page - 1, $event)">{{getText('previous')}}</a></li>
4-
<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>
5-
<li ng-if="directionLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(page + 1, $event)">{{getText('next')}}</a></li>
6-
<li ng-if="boundaryLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(totalPages, $event)">{{getText('last')}}</a></li>
7-
</ul>
2+
<li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()||ngDisabled}"><a href ng-click="selectPage(1, $event)">{{getText('first')}}</a></li>
3+
<li ng-if="directionLinks" ng-class="{disabled: noPrevious()||ngDisabled}"><a href ng-click="selectPage(page - 1, $event)">{{getText('previous')}}</a></li>
4+
<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>
5+
<li ng-if="directionLinks" ng-class="{disabled: noNext()||ngDisabled}"><a href ng-click="selectPage(page + 1, $event)">{{getText('next')}}</a></li>
6+
<li ng-if="boundaryLinks" ng-class="{disabled: noNext()||ngDisabled}"><a href ng-click="selectPage(totalPages, $event)">{{getText('last')}}</a></li>
7+
</ul>

0 commit comments

Comments
 (0)