AngularJS分页异常：选择每页条数后切换页面加载全部数据

看起来问题出在分页时传入的pageSize是字符串类型，导致计算索引时出现了意外的类型转换，进而让slice方法加载了全部数据。

问题分析 #

你的下拉列表绑定的inputLimit.name是字符串格式（比如"15"、"20"），而在PagerService.GetPager方法中，直接使用这个字符串进行数学运算：

var startIndex = (currentPage - 1) * pageSize;
var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

当pageSize是字符串时，startIndex + pageSize会执行字符串拼接而非数字加法。比如当前页是2、pageSize是"15"时：

• startIndex = (2-1)*"15" = 15（这里数字乘字符串会自动转成数字，暂时没问题）
• startIndex + pageSize = 15 + "15" = "1515"（数字加字符串变成字符串）
• 后续"1515" - 1 = 1514（字符串减数字转成数字）
• 如果你的总数据量小于1514，endIndex会取totalItems-1，最终slice(15, totalItems)会从第15条加载到最后，看起来像是加载了全部数据（如果总数据量不大的话）。

解决方案 #

只需要确保pageSize是数字类型即可，有两种简单的修改方式：

方式1：在控制器中传入前转换为数字

修改控制器setPage方法中调用GetPager的代码，把inputLimit.name转成整数：

function setPage(page) {
  if (page < 1 || page > $scope.pager.totalPages) {
    return;
  }
  // 将字符串格式的pageSize转为数字
  const pageSize = parseInt($scope.inputLimit.name, 10);
  $scope.pager = PagerService.GetPager($scope.totalItems, page, pageSize);
  $scope.resultFiltered = $scope.result.slice($scope.pager.startIndex, $scope.pager.endIndex + 1);
}

方式2：在PagerService内部处理类型转换

在GetPager方法开头，把传入的pageSize转为数字，避免外部传入类型错误：

function GetPager(totalItems, currentPage, pageSize) {
  // default to first page
  currentPage = currentPage || 1;
  // 转换为数字，默认页大小10
  pageSize = parseInt(pageSize, 10) || 10;
  // ... 剩余代码不变
}

额外建议 #

你也可以优化下拉列表的绑定，直接把值绑定为数字：

<select id="input-limit" class="form-control" ng-model="inputLimit" ng-options="item.id as item.name for item in inputLimitList"></select>

然后修改inputLimitList的id为对应数字：

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

这样inputLimit直接就是数字，调用时不需要再转换，代码更清晰。

内容的提问来源于stack exchange，提问作者Celia