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

Commit

Permalink
feat(pagination): add custom label support
Browse files Browse the repository at this point in the history
- Add ability to customize labels with `pageLabel` attribute

Closes #2532
Closes #5547
  • Loading branch information
ashaffer authored and wesleycho committed Feb 26, 2016
1 parent 8364e76 commit 785c373
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 8 deletions.
13 changes: 8 additions & 5 deletions src/pagination/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ A lightweight pagination directive that is focused on ... providing pagination &
<small class="badge">C</small>
_(Default: `true`)_ -
Whether to display Previous / Next buttons.

* `first-text`
<small class="badge">C</small>
_(Default: `First`)_ -
Expand All @@ -41,13 +41,13 @@ A lightweight pagination directive that is focused on ... providing pagination &
<small class="badge">C</small>
_(Default: `Last`)_ -
Text for Last button.

* `max-size`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `null`)_ -
Limit number for pagination size.

* `next-text`
<small class="badge">C</small>
_(Default: `Next`)_ -
Expand All @@ -56,7 +56,7 @@ A lightweight pagination directive that is focused on ... providing pagination &
* `ng-change`
<small class="badge">$</small> -
This can be used to call a function whenever the page changes.

* `ng-disabled`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
Expand All @@ -74,6 +74,9 @@ A lightweight pagination directive that is focused on ... providing pagination &
_(Default: `angular.noop`)_ -
An optional expression assigned the total number of pages to display.

* `page-label`-
An optional expression to override the page label based on passing the current page indexes. Supports page number with `$page` in the template.

* `previous-text`
<small class="badge">C</small>
_(Default: `Previous`)_ -
Expand All @@ -88,7 +91,7 @@ A lightweight pagination directive that is focused on ... providing pagination &
* `template-url`
_(Default: `uib/template/pagination/pagination.html`)_ -
Override the template for the component with a custom provided template

* `total-items`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Expand Down
5 changes: 3 additions & 2 deletions src/pagination/pagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
var maxSize = angular.isDefined($attrs.maxSize) ? $scope.$parent.$eval($attrs.maxSize) : uibPaginationConfig.maxSize,
rotate = angular.isDefined($attrs.rotate) ? $scope.$parent.$eval($attrs.rotate) : uibPaginationConfig.rotate,
forceEllipses = angular.isDefined($attrs.forceEllipses) ? $scope.$parent.$eval($attrs.forceEllipses) : uibPaginationConfig.forceEllipses,
boundaryLinkNumbers = angular.isDefined($attrs.boundaryLinkNumbers) ? $scope.$parent.$eval($attrs.boundaryLinkNumbers) : uibPaginationConfig.boundaryLinkNumbers;
boundaryLinkNumbers = angular.isDefined($attrs.boundaryLinkNumbers) ? $scope.$parent.$eval($attrs.boundaryLinkNumbers) : uibPaginationConfig.boundaryLinkNumbers,
pageLabel = angular.isDefined($attrs.pageLabel) ? function(idx) { return $scope.$parent.$eval($attrs.pageLabel, {$page: idx}); } : function(idx) { return idx; };
$scope.boundaryLinks = angular.isDefined($attrs.boundaryLinks) ? $scope.$parent.$eval($attrs.boundaryLinks) : uibPaginationConfig.boundaryLinks;
$scope.directionLinks = angular.isDefined($attrs.directionLinks) ? $scope.$parent.$eval($attrs.directionLinks) : uibPaginationConfig.directionLinks;

Expand Down Expand Up @@ -57,7 +58,7 @@ angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])

// Add page number links
for (var number = startPage; number <= endPage; number++) {
var page = makePage(number, number, number === currentPage);
var page = makePage(number, pageLabel(number), number === currentPage);
pages.push(page);
}

Expand Down
12 changes: 11 additions & 1 deletion src/pagination/test/pagination.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -876,7 +876,10 @@ describe('pagination directive', function() {

describe('override configuration from attributes', function() {
beforeEach(function() {
element = $compile('<uib-pagination boundary-links="true" first-text="<<" previous-text="<" next-text=">" last-text=">>" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
$rootScope.pageLabel = function(id) {
return 'test_'+ id;
};
element = $compile('<uib-pagination boundary-links="true" page-label="pageLabel($page)" first-text="<<" previous-text="<" next-text=">" last-text=">>" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
$rootScope.$digest();
});

Expand All @@ -890,6 +893,13 @@ describe('pagination directive', function() {
expect(getPaginationEl(-2).text()).toBe('>');
expect(getPaginationEl(-1).text()).toBe('>>');
});

it('has the label of the page as text in each page item', function() {
for (var i = 1; i <= 5; i++) {
// +1 because the first element is a <
expect(getPaginationEl(i+1).text()).toEqual('test_'+i);
}
});
});

describe('disabled with ngDisable', function() {
Expand Down

0 comments on commit 785c373

Please sign in to comment.