Thursday, July 17, 2014

AngularJS paganation directive changing paginationConfig.itemsPerPage default value

I dealt with AngularJS pagination and I saw that AngularJS pagination calculate itemsPerPage with default value = 10.

If you decide put itemsPerPage not equal to 10, you will have a problem with total pages number that will be calculated wrong.

So, lets find out how to chage itemsPerPage for angularJS pagination in case you would like put on your page items number different from 10, lets say 8:

1. Go to ui-bootstrap.js and find 'paganation' directive.

.constant('paginationConfig', {
  itemsPerPage: 10,
  boundaryLinks: false,
  directionLinks: true,
  firstText: 'First',
  previousText: 'Previous',
  nextText: 'Next',
  lastText: 'Last',
  rotate: true
})

.directive('pagination', ['$parse', 'paginationConfig', function($parse, paginationConfig) {
  return {
    restrict: 'EA',
    scope: {
      totalItems: '=',
      firstText: '@',
      previousText: '@',
      nextText: '@',
      lastText: '@'
    },
    require: ['pagination', '?ngModel'],
..............................

2. Inject 'paginationConfig' to your scope

angular.module('modul').controller('Controller', function ($scope, $http, getSerchedProducts, pagination, sharedData, paginationConfig) {

3. Change paginationConfig.itemsPerPage = 8 instead of default 10:


No comments:

Post a Comment