Smart Table tbody中currentPage未定义的问题解决问询

你遇到的核心问题是Smart Table的分页参数currentPage默认存在于分页组件的子作用域中，而你的tbody嵌套ng-repeat的作用域无法直接访问到它。这里有两种可靠的解决方案：

方案一：显式绑定currentPage到控制器变量（推荐） #

通过st-pagination的st-page属性，把分页的当前页值绑定到你控制器中的变量，这样整个模板都能轻松访问到它：

步骤1：修改分页组件代码 #

在tfoot的分页div上添加st-page绑定：

<tfoot>
  <tr>
    <td colspan="10" class="text-center">
      <div st-pagination="" st-items-by-page="10" st-displayed-pages="7" st-page="currentPage"></div>
    </td>
  </tr>
</tfoot>

步骤2：在控制器中初始化变量 #

如果用$scope语法：

// 控制器中
$scope.currentPage = 1; // 初始化默认第一页

如果用controllerAs语法（更推荐的组件化写法）：

// 控制器中
vm.currentPage = 1;
// 模板中对应修改为：st-page="vm.currentPage"，tbody中用(vm.currentPage -1)*10

步骤3：在tbody中使用currentPage #

现在就能正常计算全局索引了：

<tbody>
  <tr ng-repeat="row in inputBuckets track by $index">
    <td>{{row.key | date:'yyyy-MM-dd HH:mm:ss'}}</td>
    <!-- 现在currentPage已可正常访问 -->
    <td ng-repeat="item in input.inputData">{{item[$parent.$index + (currentPage - 1)*10]}}</td>
  </tr>
</tbody>

方案二：通过表格作用域获取（不推荐，依赖内部实现） #

如果不想修改分页组件，也可以通过表格元素的作用域直接获取Smart Table内部的currentPage，但这种方法依赖Smart Table的内部实现，后续版本可能会变动：

<tbody>
  <tr ng-repeat="row in inputBuckets track by $index">
    <td>{{row.key | date:'yyyy-MM-dd HH:mm:ss'}}</td>
    <!-- 给表格加id="dataTable"，然后通过作用域获取 -->
    <td ng-repeat="item in input.inputData">{{item[$parent.$index + (angular.element('#dataTable').scope().currentPage - 1)*10]}}</td>
  </tr>
</tbody>

记得给表格添加id：<table id="dataTable" ...>

额外说明 #

你的外层ng-repeat="row in inputBuckets"是分页后的数据集，所以$parent.$index是当前页的局部索引，加上(currentPage-1)*10就能得到全局数据的索引，这样每页就能加载对应分段的数据集了。注意要确保input.inputData的长度足够，避免索引越界的问题。

内容的提问来源于stack exchange，提问作者Matija Župančić