Question

我将分页添加到我的网站：

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

 <ul>
    <li ng-repeat="offer in printResult.offers">

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

现在，当用户单击另一个页面时，脚本应该向服务器调用post请求。它工作，但执行两次而不是一次。在firebug我可以看到，服务器有两个请求，应该是一个。

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

    var srv = this;
    srv.offers = [];
    var urlFromForm = '';
 $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;
      urlFromForm = url;
      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);
    };
  });

有什么问题？

编辑：

我收到错误，我的函数$scope.$watch执行了两次。当我点击下一页时，会捕获其编号，但会删除第一页的编号。下一页不亮。按钮一直亮1页。

日志：

WatchPage: 1
 Call postUrlToService [object Object]
Post: [object Object]
Server response: [object Object]
WatchPage: 2
Click + 2
Url:  http://exmaple.com/tring=&bmatch=s0-fas-1-4-0408
 Call postUrlToService [object Object]
Post: [object Object]
WatchPage: 1 //after response code set watchpage to 1, why? 
Server response: [object Object]

响应代码设置watchpage为1后，为什么？用户点击时如何设置页面？

修改

有效。所有页面都等于100但在链接上我可以访问10.为什么？

 <pagination total-items="totalItems" items-per-page="itemsPerPage"
              ng-model="currentPage" ng-change="pageChanged()"></pagination>

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

    var srv = this;
    var urlFromForm = '';
    var pageNumber = '';

    var flag=0;
    srv.offers = [];

    $scope.totalItems = 0;

    $scope.itemsPerPage = 10;
    $scope.currentPage = 1;

    function postUrlToService(url) {

      $scope.dataLoading = true;
      $scope.printResult = null;
      urlFromForm = url;
      initCreate();

      console.log('Call postUrlToService ' + url);

      PageModel.postUrl(angular.extend({},
        {page: pageNumber},url)).then(function (result) {

        srv.offers = result.data;

        console.log('Server response: ' + srv.offers);

        if(flag==0) {
          $scope.totalItems = srv.offers.pg;
        }
        $scope.printResult = srv.offers;
        $scope.dataLoading = false;
        flag=1;
      });
    }

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

    $scope.$watch("currentPage", function(newInput, oldInput) {
      if(newInput != oldInput){
        //Do your stuff
        console.log(newInput);
        pageNumber = newInput;
        $scope.currentPage = newInput;
        postUrlToService(urlFromForm);
      }
    });

    srv.postUrlToService = postUrlToService;

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

    var service = this;

    function getUrl() {
      return ENDPOINT;
    }

    service.postUrl = function (url) {
      console.log("Post: " + url);
      return $http.post(getUrl(), url);
    };
  });

Answer 1

$scope.$watch("currentPage + numPerPage", function(newInput, oldInput) {
    if(newInput != oldInput){
        //Do your stuff
    }
});

将解决您的问题。

AngularJS分页和更改页面调用后发送到服务器，双重请求

1 个答案: