Question

我正试图在我的页面中使用带有angularjs的谷歌分页。用户可以通过在下拉列表中选择数字来选择每页中显示的元素数量。问题是，如果用户选择此值，则第一页正确显示，如果我单击其他页面，例如第2页，则会加载列表中的所有元素。你可以在下面看到我的代码。

这是我的HTML代码：

<!-- page size dropdown list -->
<div>
    <label class="control-label" for="input-limit">Show:</label>
</div>
<div>
    <select id="input-limit" class="form-control" ng-model="inputLimit" ng-change="paginationLimit()" ng-options="item.name for item in inputLimitList"></select>
</div>

<li ng-repeat="product in resultFiltered" >
                <a ui-sref="single_product({id:product.productId})"><span ng-bind="product.name"></span></a>                        
</li>

这是我的分页服务

angular.module('myApp')
  .service('PagerService', function ()
  {
      // service definition
      var service = {};

      service.GetPager = GetPager;

      return service;

      // service implementation
      function GetPager(totalItems, currentPage, pageSize) {
          //alert(pageSize);
          // default to first page
          currentPage = currentPage || 1;

          // default page size is 10
          pageSize = pageSize || 10;

          // calculate total pages
          var totalPages = Math.ceil(totalItems / pageSize);

          var startPage, endPage;
          if (totalPages <= 10) {
              // less than 10 total pages so show all
              startPage = 1;
              endPage = totalPages;
          } else {
              // more than 10 total pages so calculate start and end pages
              if (currentPage <= 6) {
                  startPage = 1;
                  endPage = 10;
              } else if (currentPage + 4 >= totalPages) {
                  startPage = totalPages - 9;
                  endPage = totalPages;
              } else {
                  startPage = currentPage - 5;
                  endPage = currentPage + 4;
              }              
          }

          // calculate start and end item indexes
          var startIndex = (currentPage - 1) * pageSize;
          var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
          // create an array of pages to ng-repeat in the pager control
          //var pages = _.range(startPage, endPage + 1);
          var pages = [];
          for (var i = startPage; i <= endPage; i += 1) {
              pages.push(i);
          }

          // return object with all pager properties required by the view          
          return {
              totalItems: totalItems,
              currentPage: currentPage,
              pageSize: pageSize,
              totalPages: totalPages,
              startPage: startPage,
              endPage: endPage,
              startIndex: startIndex,
              endIndex: endIndex,
              pages: pages
          };

      }
  });

这是我在控制器中的代码：

'use strict';

angular.module("myApp")
  .controller('ProductCtrl', function ($scope, $state, $stateParams, $location, dataProvider, validationServices, $window, PagerService, $rootScope) {

      $scope.inputLimitList = [
        { id: 0, name: "15" },
        { id: 1, name: "20" },
        { id: 2, name: "30" },
        { id: 3, name: "40" },
        { id: 4, name: "50" }
      ];
      $scope.inputLimit = $scope.inputLimitList[0];

     var jsonGet = 'product/getAll'; 

          dataProvider.get(jsonGet).then(function (response) {
              $scope.result = response.data;
              $scope.totalItems = $scope.result.length;
              //alert("totalItems" + $scope.totalItems);
              if (!($scope.result.constructor === Array)) {
                  var array = new Array();
                  array.push($scope.result);
                  $scope.result = array;

              }
              pagination();
          });
      $scope.paginationLimit = function () {
          pagination();
      }

      function pagination() {

          $scope.pager = {};
          $scope.setPage = setPage;

          initController();

          function initController() {
              // initialize to page 1
              $scope.setPage(1);
          }

          function setPage(page) {
              if (page < 1 || page > $scope.pager.totalPages) {
                  return;
              }
              //alert($scope.inputLimit.name);
              // get pager object from service
              $scope.pager = PagerService.GetPager($scope.totalItems, page, $scope.inputLimit.name);
              // get current page of items  
              $scope.resultFiltered = $scope.result.slice($scope.pager.startIndex, $scope.pager.endIndex + 1);
          }
      }
  });

如果我不使用下拉列表中的值，则服务默认将页面大小设置为10，并且工作正常。问题是用户是否选择了值。谁能帮我？

Answer 1

问题是$scope.inputLimit.name不是数字。它是字符串，所以把它编号。

 $scope.pager = PagerService.GetPager($scope.totalItems, page, Number($scope.inputLimit.name));

，或者

 $scope.inputLimitList = [
        { id: 0, name: 15 },
        { id: 1, name: 20 },
        { id: 2, name: 30 },
        { id: 3, name: 40 },
        { id: 4, name: 50 }
      ];

选择页面大小时Angularjs分页问题

1 个答案: