Pagination on JSON Data in Angular

2019-07-27 04:59发布

问题:

I'm download data from my server when user enter url into input and click Submit. Next I display this data in HTML:

<p>{{printResult.pg}}</p>
  <ul>
    <li ng-repeat="offer in printResult.offers">

      <p>{{offer.name}}</p>
    </li>
  </ul>

printResult.pg is a number of pages

I would like to add pagination from 1 to printResult.pg and when user change page Angular call post to server to next data. How can I do this?

My controller:

angular.module('PostService', [])
  .controller('PageCtrl', function ($scope, PostModel) {

    var srv = this;
    srv.offers = [];



    function postUrlToService(url) {

      $scope.dataLoading = true;
      $scope.printResult = null;
      initCreate();
      PostModel.postUrl(url).then(function (result) {
        srv.offers = result.data;
        $scope.totalItems = srv.offers.pg;
        $scope.printResult = srv.offers;
        $scope.dataLoading = false;
      });
    }

    function initCreate() {
      srv.newUrl = {url: ''};
    }

    srv.postUrlToService = postUrlToService;

  })
  .constant('ENDPOINT', 'http://localhost:8080/api/send')
  .service('PostModel', function ($http, ENDPOINT) {

    var service = this;

    function getUrl() {
      return ENDPOINT;
    }

    service.postUrl = function (url) {

      return $http.post(getUrl(), url);
    };
  }); 

EDIT:

I DO THIS, but when I click next page post call performed TWICE. Why?

 <pagination
    ng-model="currentPage"
    total-items="printResult.pg"
    max-size="printResult.pg"
    boundary-links="true">
  </pagination>

///

 $scope.$watch("currentPage + numPerPage", function() {

      if(urlFromForm.url) {
        console.log("Klikam + " + $scope.currentPage);
        console.log("Url:  " + urlFromForm.url);

        pageNumber = $scope.currentPage;
        postUrlToService(urlFromForm);
      }
    });
function postUrlToService(url) {

          $scope.dataLoading = true;
          $scope.printResult = null;
          initCreate();
          PostModel.postUrl(url).then(function (result) {
            srv.offers = result.data;
            $scope.totalItems = srv.offers.pg;
            $scope.printResult = srv.offers;
            $scope.dataLoading = false;
          });
        }

        function initCreate() {
          srv.newUrl = {url: ''};
        }

        srv.postUrlToService = postUrlToService;

      })
      .constant('ENDPOINT', 'http://localhost:8080/api/send')
      .service('PostModel', function ($http, ENDPOINT) {

        var service = this;

        function getUrl() {
          return ENDPOINT;
        }

        service.postUrl = function (url) {

          return $http.post(getUrl(), url);
        };
      });