CODEWITHSUNDEEP
angularjspagination
Marv
Marv

Reputation: 11

AngularJS uib-pagination ng-change on function

I'm not able to call a function with the ng-change label. The pagination should list all calendar weeks till now (38) and should list on pageChanged the selected calendar week. I need to know how to call $scope.currentPage on the getData function to update the week on change.

<uib-pagination
total-items="totalItems"
ng-model="currentPage"
max-size="maxSize"
boundary-link-numbers="true"
ng-change="pageChanged()"></uib-pagination>

$scope.pageChanged = function() {
  getData();
};
$scope.totalItems = 7;
$scope.currentPage = 1;
$scope.maxSize = 38;

function getData() {
  $http.get($auth.apiUrl() + '/api/status?cweek=' + $scope.currentPage).then(function(response) {
    $scope.getData = response.data;
  },
  function(error) {
    alert("Could not fetch data from /api/status");
  });
}

Upvotes: 0

Views: 2237

Answers (1)

Marv
Marv

Reputation: 11

Working Code:

controller.js

$scope.api = 'https://mysite';
$scope.getData = [];
$scope.numPages = moment().week();
$scope.currentPage = moment().week() -1;
$scope.maxSize = 5;

function callApi(callback) {
  $scope.currentPage = callback;
  $http.get($scope.api + '/api/status?cweek=' + ($scope.currentPage)).then(function(response) {
    $scope.getData = response.data;
    // dont know how totalItems calculation is done but with this pagination will show all calendar weeks till todays week
    $scope.totalItems = $scope.getData.length * 55;
  },
  function(error) {
    alert("Could not fetch data from /api/status");
  });
}
  $scope.pageChanged = function() {
  callApi($scope.currentPage);
  console.log('Page changed to: ' + $scope.currentPage);
};

callApi($scope.currentPage);

index.html

<ul uib-pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages" ng-change="pageChanged()"></ul>

Upvotes: 1

Related Questions