AngularJS uib-pagination ng-change on function

时间:2017-09-20 10:18:03

标签: angularjs pagination

我无法使用ng-change标签调用函数。分页应列出所有日历周至今(38),并应在页面上列出更改所选日历周。我需要知道如何在getData函数上调用$scope.currentPage来更新变更周。

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

1 个答案:

答案 0 :(得分:1)

工作代码:

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>