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

Add option to disable pagination from outside. #3956

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/pagination/pagination.js
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -86,7 +86,8 @@ angular.module('ui.bootstrap.pagination', [])
firstText: '@',
previousText: '@',
nextText: '@',
lastText: '@'
lastText: '@',
ngDisabled:'='
},
require: ['pagination', '?ngModel'],
controller: 'PaginationController',
Expand Down
32 changes: 32 additions & 0 deletions src/pagination/test/pagination.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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);
});
Expand Down Expand Up @@ -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);
});
});
});
12 changes: 6 additions & 6 deletions template/pagination/pagination.html
Original file line number Diff line number Diff line change
@@ -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>