Angular-bootstrap pagination gives undefined function error

Question

I am trying to use angular-bootstrap pagination footer

I get the error

 TypeError: undefined is not a function
    at Object.fn (http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2265:5)
    at Scope.$get.Scope.$digest (http://localhost:3000/lib/angular/angular.js:12650:29)
    at Scope.$get.Scope.$apply (http://localhost:3000/lib/angular/angular.js:12915:24)
    at done (http://localhost:3000/lib/angular/angular.js:8450:45)
    at completeRequest (http://localhost:3000/lib/angular/angular.js:8664:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:3000/lib/angular/angular.js:8603:11)angular.js:10126 (anonymous function)angular.js:7398 $getangular.js:12669 $get.Scope.$digestangular.js:12915 $get.Scope.$applyangular.js:8450 doneangular.js:8664 completeRequestangular.js:8603 xhr.onreadystatechange

ui-bootstrap-tpls.js:2265 line is "setNumPages"

$scope.$watch('totalPages', function(value) {
  setNumPages($scope.$parent, value); // Readonly variable

  if ( $scope.page > value ) {
    $scope.selectPage(value);
  } else {
    ngModelCtrl.$render();
  }
});

I installed angular-bootstrap using bower and included

'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',

When I search for function setNumPages in angular-bootstrap repo i found it in

src/pagination/pagination.js

How do I make sure pagination.js is also loaded into my browser. I did not find pagination.js in my lib. I followed How to do paging in AngularJS?

My guess - `setNumPages` is set [here](https://github.com/angular-ui/bootstrap-bower/blob/master/ui-bootstrap-tpls.js#L2214) to `$parse($attrs.numPages).assign` or a noop. The latter shouldn't give you the error you're seeing, so I'd guess that the former is not returning a valid function. Could you be providing a bad expression for the `num-pages` attribute? Maybe try a dead-simple value like `3` and see if that clears it up. — Bungle, Jan 16 '15 at 05:49
This might point you in the right direction: http://stackoverflow.com/questions/26141818/numpages-not-being-calculated-by-pagination-directive — Bungle, Jan 16 '15 at 05:54

score 1 · Answer 1 · answered Mar 25 '15 at 15:50

1

Try changing numPages into a property instead of a function:

$scope.numPages = Math.ceil($scope.todos.length / $scope.numPerPage);

answered Mar 25 '15 at 15:50

ST7

2,272
1
20
13

score 0 · Answer 2 · answered Apr 08 '15 at 14:12

I had same error and I solve this problem ->

First in UI:

<pagination
  total-items="vm.pagination.totalItems"
  items-per-page="vm.pagination.itemsPerPage"
  ng-model="vm.pagination.currentPage"
  current-page="vm.pagination.currentPage"
  boundary-links="true">
</pagination>

Second in Ctrl:

var vm = this, //controllerAs: 'vm'
    itemsPerPage = 10;
vm.pagination = {
   currentPage: 1,
   itemsPerPage: itemsPerPage,
   totalItems: vm.alarms.length,
   numPages: Math.ceil(vm.alarms.length / itemsPerPage)
 };

 $scope.$watch('vm.pagination.currentPage', function() {
    var begin = ((vm.pagination.currentPage - 1) * vm.pagination.itemsPerPage),
        end = begin + vm.pagination.itemsPerPage;
    vm.filterAlarms = vm.alarms.slice(begin, end);
});

Angular-bootstrap pagination gives undefined function error

2 Answers2