使用dirPaginate结合搜索过滤器时，如何获取列表项实际索引？

我之前也碰到过一模一样的情况——用dirPaginate做分页加搜索后，$index只会返回当前过滤后分页列表的索引，完全不是原列表里的真实位置。这里有几个实用的解决方法，你可以根据自己的场景来选：

方法1：初始化时给每个对象添加原始索引（最推荐） #

如果你的列表允许修改（比如前端生成的，或者后端返回后可以加工），直接在控制器里给每个对象加一个originalIndex字段，这样不管怎么过滤分页，这个值都不会变。

控制器代码： #

// 假设你的原数据列表是$scope.originalItems
$scope.originalItems.forEach(function(item, index) {
  // 想从1开始显示索引就加1，要0-based的话直接用index
  item.originalIndex = index + 1; 
});
// 把加工后的列表绑定到dirPaginate用的变量上
$scope.displayItems = angular.copy($scope.originalItems);

模板代码： #

<tr dir-paginate="item in displayItems | filter:searchKeyword | itemsPerPage:10">
  <td>{{ item.originalIndex }}</td>
  <td>{{ item.yourFieldName }}</td>
  <!-- 其他字段展示 -->
</tr>

这个方法一次计算终身受用，没有性能问题，而且不管有没有重复对象都能准确获取原索引。

方法2：直接在模板中查找原列表索引（适合对象唯一的场景） #

如果你不想修改原对象，而且列表里的每个对象都是唯一的（没有重复项），可以直接用原列表的indexOf方法获取位置：

模板代码： #

<!-- 先把过滤后的列表存到filteredItems变量里，方便后续操作 -->
<tr dir-paginate="item in filteredItems = (originalItems | filter:searchKeyword) | itemsPerPage:10">
  <td>{{ originalItems.indexOf(item) + 1 }}</td>
  <td>{{ item.yourFieldName }}</td>
</tr>

⚠️ 注意：如果列表里有重复的对象，indexOf只会返回第一个匹配项的索引，这时候这个方法就不准了，得用下面的方法。

方法3：通过唯一ID查找原索引（适合有重复对象的场景） #

如果你的对象有唯一标识（比如后端返回的id字段），可以写一个辅助函数来根据ID定位原列表中的索引：

控制器代码： #

$scope.getOriginalIndex = function(currentItem) {
  // 找到原列表中匹配ID的对象
  const matchItem = $scope.originalItems.find(item => item.id === currentItem.id);
  // 返回原索引（+1是从1开始显示，按需调整）
  return $scope.originalItems.indexOf(matchItem) + 1;
};

模板代码： #

<tr dir-paginate="item in originalItems | filter:searchKeyword | itemsPerPage:10">
  <td>{{ getOriginalIndex(item) }}</td>
  <td>{{ item.yourFieldName }}</td>
</tr>

这个方法兼容性最强，哪怕有重复对象，只要ID唯一就能准确获取原索引。

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