pagination in angular js ui.bootstrap doesnt work for me

Question

I add ui-bootstrap-tpls-0.12.0.js to my project and us accordion and now I wanna use pagination but i get this error

ngModelCtrl.$render is not a function

here is my code

<div ng-controller="paginationCtrl">
<pagination num-pages="noOfPages" current-page="currentPage" on-select-page="pageChanged(page)"></pagination>    

</div>

i add ui.bootstrap

angular.module("boors", ['ui.router','ui.bootstrap','angularUtils.directives.uiBreadcrumbs','ngAnimate','truncate']);

and in my script tag i have

<script src="<?=$this->assetsBase?>/js/lib/ui-bootstrap-tpls-0.12.0.js"></script>

accordion works fine but pagination doesnt work

what version of angular are you using?

Michael Kang
– Michael Kang

2014-12-01 11:05:24 +00:00
Commented Dec 1, 2014 at 11:05 — Michael Kang
– Michael Kang, Commented Dec 1, 2014 at 11:05
v1.2.25 i use in my porject

m hadadi
– m hadadi

2014-12-01 11:06:38 +00:00
Commented Dec 1, 2014 at 11:06 — m hadadi
– m hadadi, Commented Dec 1, 2014 at 11:06

zewa666 · Accepted Answer · 2014-12-01 11:10:39Z

9

Take a closer look at the documentation for the pagination control. http://angular-ui.github.io/bootstrap/#/pagination

I guess you're at least missing the ng-model attribute, otherwise your pagination doesn't know where to look for the current value. Guess thats what you meant with current-page.

answered Dec 1, 2014 at 11:10

zewa666

2,60319 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shohel · Accepted Answer · 2014-12-01 11:10:24Z

Use version 10, Here is the sample of pagination

HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <section class="main" ng-controller="contentCtrl">
      <div ng-repeat="friend in friends">
        {{friend.name}}
      </div>
      <pagination page="currentPage" total-items="totalItems" items-per-page="itemsPerPage" on-select-page="setPage(page)"></pagination>

      <p>
      total Items: {{totalItems}}<br />
      Items per page: {{itemsPerPage}}<br />
      Current Page: {{currentPage}}
      </p>
    </section>
  </body>

</html>

JS

// Code goes here

angular.module('plunker', ['ui.bootstrap'])
  .controller('contentCtrl', function ($scope) {

    $scope.friends = [
      {'name':'Jack'},
      {'name':'Tim'},
      {'name':'Stuart'},
      {'name':'Richard'},
      {'name':'Tom'},
      {'name':'Frank'},
      {'name':'Ted'},
      {'name':'Michael'},
      {'name':'Albert'},
      {'name':'Tobby'},
      {'name':'Mick'},
      {'name':'Nicholas'},
      {'name':'Jesse'},
      {'name':'Lex'},
      {'name':'Robbie'},
      {'name':'Jake'},
      {'name':'Levi'},
      {'name':'Edward'},
      {'name':'Neil'},
      {'name':'Hugh'},
      {'name':'Hugo'},
      {'name':'Yanick'},
      {'name':'Matt'},
      {'name':'Andrew'},
      {'name':'Charles'},
      {'name':'Oliver'},
      {'name':'Robin'},
      {'name':'Harry'},
      {'name':'James'},
      {'name':'Kelvin'},
      {'name':'David'},
      {'name':'Paul'}
    ];

    $scope.totalItems = 64;
    $scope.itemsPerPage = 10
    $scope.currentPage = 1;

    $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;
  });

Collectives™ on Stack Overflow

pagination in angular js ui.bootstrap doesnt work for me

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related