AngularJS中遍历Map键值对实现表格分页的技术咨询

嘿，这问题我熟！在AngularJS里给Map数据的表格做分页，核心是先把Map转成数组（毕竟ng-repeat和分页逻辑对数组更友好），然后用AngularJS自带的limitTo过滤器配合分页变量来实现。我给你一步步拆解：

后台返回的Map直接用ng-repeat遍历虽然可行，但分页需要对数据做切片操作，数组会更方便。在你的控制器里，把Map转换成包含键值对的数组：

// 假设你从数据库获取的Map存在$scope.mapData中
$scope.mapData = { /* 你的Map键值对数据 */ };

// 转换为[{key: 'xxx', value: 'xxx'}, ...]格式的数组
$scope.tableData = Object.keys($scope.mapData).map(key => ({
  key: key,
  value: $scope.mapData[key]
}));

在控制器里添加几个控制分页的变量，用来管理当前页码、每页显示条数和总页数：

$scope.currentPage = 1; // 默认显示第一页
$scope.itemsPerPage = 10; // 每页显示10条，可根据需求调整

// 计算总页数，向上取整避免最后一页数据不足的情况
$scope.totalPages = Math.ceil($scope.tableData.length / $scope.itemsPerPage);

在HTML表格中，用limitTo过滤器结合偏移量来实现分页显示，偏移量由当前页码和每页条数计算得出：

<table>
  <thead>
    <tr>
      <th>标签键</th>
      <th>标签内容</th>
    </tr>
  </thead>
  <tbody>
    <!-- 用limitTo实现分页：第一个参数是每页条数，第二个是起始偏移量 -->
    <tr ng-repeat="item in tableData | limitTo: itemsPerPage : (currentPage - 1) * itemsPerPage">
      <td>{{ item.key }}</td>
      <td><marquee><h3>{{ item.value }}</h3></marquee></td>
    </tr>
  </tbody>
</table>

最后加上分页按钮，让用户可以切换页码，这里做了两种常见的分页样式：

<!-- 简易分页控件：上一页/下一页 -->
<div class="pagination-controls">
  <button ng-disabled="currentPage === 1" ng-click="currentPage = currentPage - 1">上一页</button>
  <span>当前第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
  <button ng-disabled="currentPage === totalPages" ng-click="currentPage = currentPage + 1">下一页</button>
</div>

<!-- 可选：显示所有页码按钮，方便快速跳转 -->
<div class="page-number-buttons">
  <button 
    ng-repeat="page in getPageNumbers()" 
    ng-click="currentPage = page"
    ng-class="{active: currentPage === page}"
  >
    {{ page }}
  </button>
</div>

如果用页码按钮的话，需要在控制器里添加生成页码数组的方法：

$scope.getPageNumbers = function() {
  const pages = [];
  for (let i = 1; i <= $scope.totalPages; i++) {
    pages.push(i);
  }
  return pages;
};

• 如果你的Map数据是异步获取的（比如通过$http请求数据库），记得把数组转换和总页数计算的逻辑放在请求成功的回调里，确保数据加载完成后再执行。
• 可以把itemsPerPage做成可配置的下拉框，让用户自己选择每页显示的条数，只需要绑定下拉框的ng-model到$scope.itemsPerPage，同时监听它的变化重新计算总页数即可。

内容的提问来源于stack exchange，提问作者Suchetha H V