2

I have following pagination code

<pre>There are {{total_records}} number of records</pre>
<pagination ng-model="current_page"
            total-items="total_records"
            items-per-page="items_per_page"
            max-size="max_size" class="pagination-sm"
            boundary-links="true" rotate="false"
            num-pages="numPages" ng-change="pageChanged()">
</pagination>

When I change pagination by clicking on the DOM it works. But when I try to change the pagination by setting $scope.current_page within code it doesn't trigger pageChanged.

For example,

On DOM let's say I am at 3rd page ($scope.current_page is 3) and on DOM 3rd page is active. If I go to page 4 by click on DOM then on DOM 4th page is got active, $scope.current changes to 4, and pageChagned is triggered.

But

On DOM let's say I am at 3rd page ($scope.current_page is 3) and on DOM 3rd page is active. If I go to page 4 by changing $scope.current_page to 4 in code then at DOM page change changes to 4 but pageChanged is not getting triggered.

How can I trigger pageChanged on changing $scope.current_page at code? I have seen another solution when they suggested to use $scope.$watch but I want to know better way of doing.

Edit:

I created following plnkr (I used this for first time, so not sure whether I have done correct or not). http://plnkr.co/edit/Kldv7ZbexpgifiPIsjCT?p=preview

The problem you can see is that when you click on "Go to 3rd page" button "page number" doesn't change on <pre></pre> tags.

Thanks

Siguza
  • 21,155
  • 6
  • 52
  • 89
Ansuman Bebarta
  • 7,011
  • 6
  • 27
  • 44
  • can you show more js code ? Luckly I am working on pagination right now may be you could help me too. :) – krs8785 Oct 24 '14 at 15:57
  • Created a plnkr and updated. I used plnkr for first time and hoping I have done correctly. – Ansuman Bebarta Oct 24 '14 at 16:20
  • just add ($scope.number_of_change)++; in the setPage function ?? this will increment count of page change (i hope thats what you want ) everytime you click on that button to go to page 3 – krs8785 Oct 24 '14 at 16:24
  • is this what you want ? http://plnkr.co/edit/jDODdXvrpZ9jfP2XG0jB?p=preview – krs8785 Oct 24 '14 at 16:28
  • That can be done but I was thinking that after changing current_page it should trigger page change. As I am already having one function for handling page change why should I repeat same code inside setPage(). – Ansuman Bebarta Oct 24 '14 at 16:33
  • I am honestly lost as to what you are trying to achieve. However from what I understood when you change $scope.currentpage to 4 then on load it will start from page 4 (active). Later when you move forward/backward the page number change will increase as per code – krs8785 Oct 24 '14 at 16:41
  • No problem. Really appreciated your effort. Its not calling pageChanged() when $scope.current_page changed in code. Thank you I will use the way you suggested. – Ansuman Bebarta Oct 24 '14 at 17:06

1 Answers1

3

ng-change isn't triggered by code changes. You can get the desired effect by using $scope.$watch in the controller:

$scope.$watch(function() {
    return $scope.current_page;
}, function() {
    $scope.number_of_change++;
});

updated plnkr

(Honestly, this is a duplicate of Angular - ng-change not firing when ng-model is changed, which has a more thorough answer, but I don't have enough reputation to flag this question.)

Mary Lewis
  • 31
  • 3