Angular中ng-repeat结合ng-switch实现分页的问题排查

嘿，我碰到过类似的情况，这问题主要是dir-paginate的分页逻辑和ng-switch的DOM渲染时机/索引范围冲突导致的，咱们一步步来解决：

问题根源 #

dir-paginate的工作逻辑是先对QuestionList做分页截取，再渲染每页的7条数据，这时候<tr>上的$index是当前分页页内的局部索引（从0到6），不是原始数据的全局索引。而且把ng-switch直接挂在dir-paginate的<tr>元素上，会干扰dir-paginate对分页项的DOM追踪，导致分页控件无法正确识别总数据量，自然点分页按钮加载不了后续数据。

解决方案 #

方案1：把ng-switch移到内部的元素上（推荐） #

把ng-switch的作用范围从<tr>缩小到内部的<td>或其他元素，让dir-paginate不受干扰地处理分页逻辑：

<div ng-controller="QuestionsController">
  <div>{{TagDescription}}</div>
  <table style="width:80%">
    <!-- dir-paginate单独控制<tr>的渲染 -->
    <tr dir-paginate="item in QuestionList | itemsPerPage:7">
      <td>
        <!-- ng-switch移到<td>内部 -->
        <div ng-switch on="$index % 2">
          <div ng-switch-when="0">偶数行内容：{{item.content}}</div>
          <div ng-switch-default>奇数行内容：{{item.content}}</div>
        </div>
      </td>
      <!-- 其他列内容 -->
    </tr>
  </table>
  <!-- 确保分页控件绑定原始数据总长度 -->
  <dir-pagination-controls total-items="QuestionList.length" items-per-page="7"></dir-pagination-controls>
</div>

方案2：使用原始数据的全局索引（如果必须在级别用ng-switch） #

如果你的业务逻辑必须在<tr>级别切换样式/结构，可以给每个数据项添加全局索引，避免用分页后的局部$index：

控制器代码：

angular.module('yourApp').controller('QuestionsController', function($scope) {
  // 假设这是你的原始数据集合
  $scope.QuestionList = [/* 你的业务数据数组 */];
  
  // 给每个数据项追加原始全局索引
  $scope.QuestionList = $scope.QuestionList.map((item, originalIdx) => {
    return {...item, originalIndex: originalIdx};
  });
});

视图代码：

<div ng-controller="QuestionsController">
  <div>{{TagDescription}}</div>
  <table style="width:80%">
    <!-- 使用原始全局索引作为ng-switch的判断依据 -->
    <tr dir-paginate="item in QuestionList | itemsPerPage:7" ng-switch on="item.originalIndex % 2">
      <td ng-switch-when="0">偶数行（全局索引）：{{item.content}}</td>
      <td ng-switch-default>奇数行（全局索引）：{{item.content}}</td>
    </tr>
  </table>
  <dir-pagination-controls total-items="QuestionList.length" items-per-page="7"></dir-pagination-controls>
</div>

额外检查点 #

• 确保dir-pagination-controls的total-items属性绑定的是原始数据的总长度（QuestionList.length），而非分页后的数组长度；
• 若有其他过滤器，itemsPerPage要放在过滤器链的最后；
• 打开浏览器控制台检查是否有语法错误或数据加载异常。

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