AngularJS实现‘显示全部’复选框：切换无分页显示所有行

这需求太常见了——大部分用户习惯分页浏览，但总有少数人就想一次性看全数据，我来给你补全这个功能的实现细节，分前端HTML和AngularJS控制器逻辑两部分说：

首先把你写的复选框HTML补全（我猜你用了Font Awesome图标，顺便加了状态提示让用户更清楚当前状态）：

<div class="checkbox">
  <label>
    <input type="checkbox" id="chbShowAll" 
           ng-model="vm.ShowAll" 
           ng-change="vm.ShowAllToggle()" />
    Show All Results on One Page
    <!-- 显示当前状态的提示 -->
    <span ng-if="vm.ShowAll" class="ml-2 text-success">
      <i class="fa fa-check-circle"></i> Showing all {{vm.filteredTotal || vm.totalRecords}} records
    </span>
  </label>
</div>

接下来是AngularJS控制器里的核心逻辑，我假设你已经有了分页相关的基础变量（比如默认分页大小、当前页码、总记录数这些）：

// 初始化状态：默认不显示全部
vm.ShowAll = false;
// 默认分页大小，比如20条
vm.pageSize = 20;
vm.currentPage = 1;
vm.totalRecords = 0; // 从后端接口获取的原始总记录数
vm.filteredTotal = 0; // 筛选后的记录数（如果有筛选功能的话）

// 切换显示全部的核心方法
vm.ShowAllToggle = function() {
  if (vm.ShowAll) {
    // 先保存当前分页大小，方便后续恢复
    vm.savedPageSize = vm.pageSize;
    // 取筛选后的总数（如果有筛选），没有就用原始总记录数
    const targetTotal = vm.filteredTotal > 0 ? vm.filteredTotal : vm.totalRecords;
    // 把分页大小设为总记录数，实现无分页
    vm.pageSize = targetTotal;
    // 重置到第一页，避免分页偏移问题
    vm.currentPage = 1;
  } else {
    // 恢复之前的分页大小，默认用20兜底
    vm.pageSize = vm.savedPageSize || 20;
    // 可选：重置到第一页，符合用户切换后的预期
    vm.currentPage = 1;
  }
  // 触发数据重新加载（如果你的分页是通过后端接口请求的话）
  vm.loadData();
};

// 如果你是前端本地分页（用ng-repeat+limitTo），可以直接在模板里处理：
// <tr ng-repeat="item in vm.data | limitTo: vm.ShowAll ? (vm.filteredTotal || vm.totalRecords) : vm.pageSize : (vm.currentPage - 1) * vm.pageSize">

额外的优化小建议 #

• 性能处理：三四千行数据一次性渲染可能会让页面卡顿，尤其是AngularJS的ng-repeat，你可以：
  • 给ng-repeat加上track by $index或者数据的唯一ID，减少DOM重绘开销
  • 如果卡顿明显，考虑用虚拟滚动组件（比如angular-virtual-scroll），只渲染当前视口内的行
• 状态同步：当用户进行筛选、排序操作时，一定要同步更新vm.filteredTotal，这样显示全部的时候才会正确展示筛选后的结果
• 友好提示：可以在显示全部的时候加个轻量提示，比如“当前显示全部{{vm.filteredTotal}}条记录，可能会影响页面响应速度”，给用户心理预期

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