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

Commit

Permalink
feat(pagination): plug into ngModel controller
Browse files Browse the repository at this point in the history
Closes #1545

BREAKING CHANGE: Both `pagination` and `pager` are now integrated with `ngModelController`.
 * `page` is replaced from `ng-model`.
 * `on-select-page` is removed since `ng-change` can now be used.

  Before:

  <pagination page="current" on-select-page="changed(page)" ...></pagination>

  After:

  <pagination ng-model="current" ng-change="changed()" ...></pagination>
  • Loading branch information
bekos authored and pkozlowski-opensource committed Jan 13, 2014
1 parent 27a642f commit d65901c
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 56 deletions.
14 changes: 7 additions & 7 deletions src/pagination/docs/demo.html
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<div ng-controller="PaginationDemoCtrl">
<h4>Default</h4>
<pagination total-items="totalItems" page="currentPage"></pagination>
<pagination boundary-links="true" total-items="totalItems" page="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
<pagination direction-links="false" boundary-links="true" total-items="totalItems" page="currentPage"></pagination>
<pagination direction-links="false" total-items="totalItems" page="currentPage" num-pages="smallnumPages"></pagination>
<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
<pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
<pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
<pre>The selected page no: {{currentPage}}</pre>
<button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>

<hr />
<h4>Pager</h4>
<pager total-items="totalItems" page="currentPage"></pager>
<pager total-items="totalItems" ng-model="currentPage"></pager>

<hr />
<h4>Limit the maximum visible buttons</h4>
<pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
<pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
</div>
8 changes: 6 additions & 2 deletions src/pagination/docs/demo.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
var PaginationDemoCtrl = function ($scope) {
$scope.totalItems = 64;
$scope.currentPage = 4;
$scope.maxSize = 5;


$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};

$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};

$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;
};
8 changes: 2 additions & 6 deletions src/pagination/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ A lightweight pagination directive that is focused on ... providing pagination &

Settings can be provided as attributes in the `<pagination>` or globally configured through the `paginationConfig`.

* `page` <i class="glyphicon glyphicon-eye-open"></i>
* `ng-model` <i class="glyphicon glyphicon-eye-open"></i>
:
Current page number. First page is 1.

Expand All @@ -29,10 +29,6 @@ Settings can be provided as attributes in the `<pagination>` or globally configu
_(Defaults: true)_ :
Whether to keep current page in the middle of the visible ones.

* `on-select-page (page)`
_(Default: null)_ :
An optional expression called when a page is selected having the page number as argument.

* `direction-links`
_(Default: true)_ :
Whether to display Previous / Next buttons.
Expand Down Expand Up @@ -60,7 +56,7 @@ Settings can be provided as attributes in the `<pagination>` or globally configu
### Pager Settings ###

Settings can be provided as attributes in the `<pager>` or globally configured through the `pagerConfig`.
For `page`, `total-items`, `items-per-page`, `num-pages` and `on-select-page (page)` see pagination settings. Other settings are:
For `ng-model`, `total-items`, `items-per-page` and `num-pages` see pagination settings. Other settings are:

* `align`
_(Default: true)_ :
Expand Down
45 changes: 30 additions & 15 deletions src/pagination/pagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,16 @@ angular.module('ui.bootstrap.pagination', [])

.controller('PaginationController', ['$scope', '$attrs', '$parse', '$interpolate', function ($scope, $attrs, $parse, $interpolate) {
var self = this,
ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;

this.init = function(defaultItemsPerPage) {
this.init = function(ngModelCtrl_, defaultItemsPerPage) {
ngModelCtrl = ngModelCtrl_;

ngModelCtrl.$render = function() {
self.render();
};

if ($attrs.itemsPerPage) {
$scope.$parent.$watch($parse($attrs.itemsPerPage), function(value) {
self.itemsPerPage = parseInt(value, 10);
Expand Down Expand Up @@ -36,16 +43,16 @@ angular.module('ui.bootstrap.pagination', [])
};

this.render = function() {
this.page = parseInt($scope.page, 10) || 1;
this.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;
if (this.page > 0 && this.page <= $scope.totalPages) {
$scope.pages = this.getPages(this.page, $scope.totalPages);
}
};

$scope.selectPage = function(page) {
if ( ! self.isActive(page) && page > 0 && page <= $scope.totalPages) {
$scope.page = page;
$scope.onSelectPage({ page: page });
ngModelCtrl.$setViewValue(page);
ngModelCtrl.$render();
}
};

Expand All @@ -63,7 +70,7 @@ angular.module('ui.bootstrap.pagination', [])
if ( self.page > value ) {
$scope.selectPage(value);
} else {
self.render();
ngModelCtrl.$render();
}
});
}])
Expand All @@ -83,14 +90,18 @@ angular.module('ui.bootstrap.pagination', [])
return {
restrict: 'EA',
scope: {
page: '=',
totalItems: '=',
onSelectPage:' &'
totalItems: '='
},
require: ['pagination', '?ngModel'],
controller: 'PaginationController',
templateUrl: 'template/pagination/pagination.html',
replace: true,
link: function(scope, element, attrs, paginationCtrl) {
link: function(scope, element, attrs, ctrls) {
var paginationCtrl = ctrls[0], ngModel = ctrls[1];

if (!ngModel) {
return; // do nothing if no ng-model
}

// Setup configuration parameters
var maxSize,
Expand All @@ -102,7 +113,7 @@ angular.module('ui.bootstrap.pagination', [])
lastText = paginationCtrl.getAttributeValue(attrs.lastText, config.lastText, true),
rotate = paginationCtrl.getAttributeValue(attrs.rotate, config.rotate);

paginationCtrl.init(config.itemsPerPage);
paginationCtrl.init(ngModel, config.itemsPerPage);

if (attrs.maxSize) {
scope.$parent.$watch($parse(attrs.maxSize), function(value) {
Expand Down Expand Up @@ -203,21 +214,25 @@ angular.module('ui.bootstrap.pagination', [])
return {
restrict: 'EA',
scope: {
page: '=',
totalItems: '=',
onSelectPage:' &'
totalItems: '='
},
require: ['pager', '?ngModel'],
controller: 'PaginationController',
templateUrl: 'template/pagination/pager.html',
replace: true,
link: function(scope, element, attrs, paginationCtrl) {
link: function(scope, element, attrs, ctrls) {
var paginationCtrl = ctrls[0], ngModel = ctrls[1];

if (!ngModel) {
return; // do nothing if no ng-model
}

// Setup configuration parameters
var previousText = paginationCtrl.getAttributeValue(attrs.previousText, config.previousText, true),
nextText = paginationCtrl.getAttributeValue(attrs.nextText, config.nextText, true),
align = paginationCtrl.getAttributeValue(attrs.align, config.align);

paginationCtrl.init(config.itemsPerPage);
paginationCtrl.init(ngModel, config.itemsPerPage);

// Create page object used in template
function makePage(number, text, isDisabled, isPrevious, isNext) {
Expand Down
18 changes: 9 additions & 9 deletions src/pagination/test/pager.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ describe('pager directive', function () {
$rootScope = _$rootScope_;
$rootScope.total = 47; // 5 pages
$rootScope.currentPage = 3;
element = $compile('<pager total-items="total" page="currentPage"></pager>')($rootScope);
element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
$rootScope.$digest();
}));

Expand Down Expand Up @@ -78,13 +78,13 @@ describe('pager directive', function () {
expect($rootScope.currentPage).toBe(5);
});

it('executes the `on-select-page` expression when an element is clicked', function() {
it('executes the `ng-change` expression when an element is clicked', function() {
$rootScope.selectPageHandler = jasmine.createSpy('selectPageHandler');
element = $compile('<pager total-items="total" page="currentPage" on-select-page="selectPageHandler(page)"></pager>')($rootScope);
element = $compile('<pager total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></pager>')($rootScope);
$rootScope.$digest();

clickPaginationEl(-1);
expect($rootScope.selectPageHandler).toHaveBeenCalledWith(4);
expect($rootScope.selectPageHandler).toHaveBeenCalled();
});

it('does not changes the number of pages when `total-items` changes', function() {
Expand All @@ -99,7 +99,7 @@ describe('pager directive', function () {
describe('`items-per-page`', function () {
beforeEach(inject(function() {
$rootScope.perpage = 5;
element = $compile('<pager total-items="total" items-per-page="perpage" page="currentPage"></pagination>')($rootScope);
element = $compile('<pager total-items="total" items-per-page="perpage" ng-model="currentPage"></pagination>')($rootScope);
$rootScope.$digest();
}));

Expand Down Expand Up @@ -133,7 +133,7 @@ describe('pager directive', function () {
describe('`num-pages`', function () {
beforeEach(inject(function() {
$rootScope.numpg = null;
element = $compile('<pager total-items="total" page="currentPage" num-pages="numpg"></pager>')($rootScope);
element = $compile('<pager total-items="total" ng-model="currentPage" num-pages="numpg"></pager>')($rootScope);
$rootScope.$digest();
}));

Expand All @@ -149,7 +149,7 @@ describe('pager directive', function () {
pagerConfig.previousText = 'PR';
pagerConfig.nextText = 'NE';
pagerConfig.align = false;
element = $compile('<pager total-items="total" page="currentPage"></pager>')($rootScope);
element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
$rootScope.$digest();
}));
afterEach(inject(function(pagerConfig) {
Expand All @@ -170,7 +170,7 @@ describe('pager directive', function () {

describe('override configuration from attributes', function () {
beforeEach(inject(function() {
element = $compile('<pager align="false" previous-text="<" next-text=">" total-items="total" page="currentPage"></pager>')($rootScope);
element = $compile('<pager align="false" previous-text="<" next-text=">" total-items="total" ng-model="currentPage"></pager>')($rootScope);
$rootScope.$digest();
}));

Expand All @@ -191,7 +191,7 @@ describe('pager directive', function () {
it('changes "previous" & "next" text from interpolated attributes', function() {
$rootScope.previousText = '<<';
$rootScope.nextText = '>>';
element = $compile('<pager align="false" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" page="currentPage"></pager>')($rootScope);
element = $compile('<pager align="false" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></pager>')($rootScope);
$rootScope.$digest();

expect(getPaginationEl(0).text()).toBe('<<');
Expand Down
Loading

0 comments on commit d65901c

Please sign in to comment.