CODEWITHSUNDEEP
angularjspaginationangular-ui-bootstrap
dhuyvetter
dhuyvetter

Reputation: 594

angularJS pagination not reading current page number

I am trying to implement ui.bootstrap.pagination in my angularJS project, but I cannot seem to read the current page number, even though I have set ng-model. I am using angular-ui-bootstrap version 0.13.3.

The relevant part of my html:

    <pagination 
      data-ng-model="currentPage" 
      data-ng-change = "paginate()"
      data-total-items="repositories.total_count" 
      data-items-per-page="numPerPage" 
      data-max-size="maxSize" 
      data-boundary-links="true" >
    </pagination>

And my code:

angular.module('myApp.repositories')
.controller('RepositoryController', ['$scope', function($scope) {
  $scope.repositories = {};
  $scope.currentPage = 1;
  $scope.numPerPage = 30; // Number of items per page, set by Github API
  $scope.maxSize = 10; // Number of pages to show in pagination

  $scope.paginate = function() {    
    $http.get('https://api.github.com/search/repositories/', { 
      params: {
        q: 'twitter',
        page: $scope.currentPage
      }
    })
    .then(function(response){
        if(response.data){
            $scope.repositories = response.data;
        }
    });
  };
}]);

The pagination shows as expected and I can use it without it throwing errors, but in my paginate() function $scope.currentPage always reads 1.

I could be missing or overlooking something very basic, but I cannot seem to figure out why it isn't working.

Upvotes: 0

Views: 5143

Answers (2)

Shawn
Shawn

Reputation: 113

I'm a few months late to this but, I want to make sure future readers of this question aren't confused. Using $scope is perfectly valid and in fact a pretty good way to get started with AngularJS. "Controller As" syntax is optional.

The solution here is pretty simple: Pass the selected page number into the 'Paginate' function. Then use that value to set $scope.currentPage.

 angular.module('myApp.repositories')
 .controller('RepositoryController', ['$scope', function($scope) {
 $scope.repositories = {};
 $scope.currentPage = 1;
 $scope.numPerPage = 30; // Number of items per page, set by Github API
 $scope.maxSize = 10; // Number of pages to show in pagination

 $scope.paginate = function(pageNumber) {  
   $scope.currentPage = pageNumber;
  $http.get('https://api.github.com/search/repositories/', { 
  params: {
    q: 'twitter',
    page: $scope.currentPage
  }
  })
  .then(function(response){
    if(response.data){
        $scope.repositories = response.data;
    }
  });
};
}]);

Upvotes: 0

Victor
Victor

Reputation: 9269

Always have a dot in your model. Try this:

<pagination 
  data-ng-model="vm.currentPage"

...

  $scope.vm = {currentPage: 1};

To prevent this kind of problem, use controllerAs and avoid using the $scope as a model.

See this guide: https://github.com/johnpapa/angular-styleguide#controllers

The reason this is happening is because some directive is creating a scope in that element, and because of the way scopes are related (inheritance), your property ends up being shadowed, so the one on the child is different from the one on the parent.

It's quite annoying and complicated, which is why the best way to deal with this is not at all. Don't put stuff in your $scope apart from a reference to the actual model (for example, a controller instance, as facilitated by the controllerAs mechanism)

Upvotes: 3

Related Questions