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

Question

我正在尝试在我的页面中使用 google 之类的分页与 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 }
      ];