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

Commit 785c373

Browse files
ashafferwesleycho
authored andcommitted
feat(pagination): add custom label support
- Add ability to customize labels with `pageLabel` attribute Closes #2532 Closes #5547
1 parent 8364e76 commit 785c373

File tree

3 files changed

+22
-8
lines changed

3 files changed

+22
-8
lines changed

src/pagination/docs/readme.md

+8-5
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ A lightweight pagination directive that is focused on ... providing pagination &
1818
<small class="badge">C</small>
1919
_(Default: `true`)_ -
2020
Whether to display Previous / Next buttons.
21-
21+
2222
* `first-text`
2323
<small class="badge">C</small>
2424
_(Default: `First`)_ -
@@ -41,13 +41,13 @@ A lightweight pagination directive that is focused on ... providing pagination &
4141
<small class="badge">C</small>
4242
_(Default: `Last`)_ -
4343
Text for Last button.
44-
44+
4545
* `max-size`
4646
<small class="badge">$</small>
4747
<i class="glyphicon glyphicon-eye-open"></i>
4848
_(Default: `null`)_ -
4949
Limit number for pagination size.
50-
50+
5151
* `next-text`
5252
<small class="badge">C</small>
5353
_(Default: `Next`)_ -
@@ -56,7 +56,7 @@ A lightweight pagination directive that is focused on ... providing pagination &
5656
* `ng-change`
5757
<small class="badge">$</small> -
5858
This can be used to call a function whenever the page changes.
59-
59+
6060
* `ng-disabled`
6161
<small class="badge">$</small>
6262
<i class="glyphicon glyphicon-eye-open"></i>
@@ -74,6 +74,9 @@ A lightweight pagination directive that is focused on ... providing pagination &
7474
_(Default: `angular.noop`)_ -
7575
An optional expression assigned the total number of pages to display.
7676

77+
* `page-label`-
78+
An optional expression to override the page label based on passing the current page indexes. Supports page number with `$page` in the template.
79+
7780
* `previous-text`
7881
<small class="badge">C</small>
7982
_(Default: `Previous`)_ -
@@ -88,7 +91,7 @@ A lightweight pagination directive that is focused on ... providing pagination &
8891
* `template-url`
8992
_(Default: `uib/template/pagination/pagination.html`)_ -
9093
Override the template for the component with a custom provided template
91-
94+
9295
* `total-items`
9396
<small class="badge">$</small>
9497
<i class="glyphicon glyphicon-eye-open"></i> -

src/pagination/pagination.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
55
var maxSize = angular.isDefined($attrs.maxSize) ? $scope.$parent.$eval($attrs.maxSize) : uibPaginationConfig.maxSize,
66
rotate = angular.isDefined($attrs.rotate) ? $scope.$parent.$eval($attrs.rotate) : uibPaginationConfig.rotate,
77
forceEllipses = angular.isDefined($attrs.forceEllipses) ? $scope.$parent.$eval($attrs.forceEllipses) : uibPaginationConfig.forceEllipses,
8-
boundaryLinkNumbers = angular.isDefined($attrs.boundaryLinkNumbers) ? $scope.$parent.$eval($attrs.boundaryLinkNumbers) : uibPaginationConfig.boundaryLinkNumbers;
8+
boundaryLinkNumbers = angular.isDefined($attrs.boundaryLinkNumbers) ? $scope.$parent.$eval($attrs.boundaryLinkNumbers) : uibPaginationConfig.boundaryLinkNumbers,
9+
pageLabel = angular.isDefined($attrs.pageLabel) ? function(idx) { return $scope.$parent.$eval($attrs.pageLabel, {$page: idx}); } : function(idx) { return idx; };
910
$scope.boundaryLinks = angular.isDefined($attrs.boundaryLinks) ? $scope.$parent.$eval($attrs.boundaryLinks) : uibPaginationConfig.boundaryLinks;
1011
$scope.directionLinks = angular.isDefined($attrs.directionLinks) ? $scope.$parent.$eval($attrs.directionLinks) : uibPaginationConfig.directionLinks;
1112

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

5859
// Add page number links
5960
for (var number = startPage; number <= endPage; number++) {
60-
var page = makePage(number, number, number === currentPage);
61+
var page = makePage(number, pageLabel(number), number === currentPage);
6162
pages.push(page);
6263
}
6364

src/pagination/test/pagination.spec.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -876,7 +876,10 @@ describe('pagination directive', function() {
876876

877877
describe('override configuration from attributes', function() {
878878
beforeEach(function() {
879-
element = $compile('<uib-pagination boundary-links="true" first-text="<<" previous-text="<" next-text=">" last-text=">>" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
879+
$rootScope.pageLabel = function(id) {
880+
return 'test_'+ id;
881+
};
882+
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);
880883
$rootScope.$digest();
881884
});
882885

@@ -890,6 +893,13 @@ describe('pagination directive', function() {
890893
expect(getPaginationEl(-2).text()).toBe('>');
891894
expect(getPaginationEl(-1).text()).toBe('>>');
892895
});
896+
897+
it('has the label of the page as text in each page item', function() {
898+
for (var i = 1; i <= 5; i++) {
899+
// +1 because the first element is a <
900+
expect(getPaginationEl(i+1).text()).toEqual('test_'+i);
901+
}
902+
});
893903
});
894904

895905
describe('disabled with ngDisable', function() {

0 commit comments

Comments
 (0)