Paging using angularjs bootstrap

Question

I am trying to follow the example here for pagination.

I have was able to get to a stage where I am able to show the new page number, but I am not able to fire a click event. What can I do to trigger data-ng-click="setPage()" on the pager in the example below

<!doctype html>
<html ng-app="PagingModule">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script type="text/javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"
        rel="stylesheet">
    <script type="text/javascript">

        var PagingModule = angular.module('PagingModule', ['ui.bootstrap']);

        PagingModule.controller('PaginationCtrl', function PaginationCtrl($scope) {


            $scope.noOfPages = 7;
            $scope.currentPage = 1;

            $scope.setPage = function () {
                alert("in");//I am unable to reach this code

            };
        }
        );


    </script>
</head>
<body>
    <div ng-controller="PaginationCtrl" class="well well-small">
        <pagination data-ng-click="setPage()" boundary-links="true" num-pages="noOfPages"
            current-page="currentPage" class="pagination-small" previous-text="&lsaquo;"
            next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
        {{currentPage}}
    </div>
</body>
</html>

hitautodestruct · Accepted Answer · 2015-03-19 13:34:15Z

12

Use `ng-change`

Angular bootstrap pagination can use the ng-change attribute. It represents a function which may be called when the paging is changed. Get the current page using ng-model:

<pagination ... ng-change="setPage()" ng-model="current_page"></pagination>

For older versions <= 0.11

You can define a function in controller and pass it an attribute using on-select-change:

<pagination ... on-select-change="setPage(page)"></pagination>

See more here: https://github.com/angular-ui/bootstrap/blob/master/src/pagination/docs/readme.md

See the breaking change to the code here.

edited Mar 19, 2015 at 13:34

hitautodestruct

21.1k15 gold badges76 silver badges96 bronze badges

answered Oct 2, 2013 at 8:39

Visya

1341 silver badge11 bronze badges

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

1 Comment

Jared Eitnier Over a year ago

Thought it worth mentioning that on-select-page was removed in a recent revision. on-select-page is now ng-change.

m.e.conroy · Accepted Answer · 2013-09-06 20:06:16Z

7

There is no data-ng-click attribute for the pagination directive of angular-ui. Clicking on one of the page numbers sets the $scope.currentPage variable in your controller, or whatever you set in the attribute current-page="currentPage"

You could set up a $scope.$watch on that variable to react to changes.

answered Sep 6, 2013 at 20:06

m.e.conroy

3,53828 silver badges28 bronze badges

Collectives™ on Stack Overflow

Paging using angularjs bootstrap

2 Answers 2

Use `ng-change`

For older versions <= 0.11

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Use ng-change

For older versions <= 0.11

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Use `ng-change`