AngularJS中NGTable切换分页后显示旧数据问题求助

我之前也踩过这个坑！原因其实很直白：NGTable在初始化时，会把你传入的dataset做一个内部快照缓存起来，用来处理分页、排序这类操作。你直接修改原数组的时候，NGTable的内部缓存根本没收到更新通知，所以切换分页时它还是会拿出旧的快照数据来展示。

给你两个靠谱的解决办法，任选其一就行：

方法一：修改数据后调用reload()刷新表格 #

在控制器里保存好NGTable的tableParams实例，每次修改完数据后，调用它的reload()方法，让NGTable重新读取最新的数据源并更新内部缓存。

示例代码：

angular.module("uCloud", ["ngTable"]).controller("myController", function($scope, NgTableParams) {
  // 初始化你的数据源数组
  $scope.myData = [
    {id: 1, name: "A"},
    {id: 2, name: "B"},
    // 更多数据...
  ];

  // 初始化NGTable参数
  $scope.tableParams = new NgTableParams({}, {
    dataset: $scope.myData
  });

  // 假设这是你修改数据的函数
  $scope.updateData = function() {
    // 修改原数组中的数据
    $scope.myData[0].name = "A-修改后";
    
    // 关键一步：刷新表格，更新内部缓存
    $scope.tableParams.reload();
  };
});

方法二：直接更新NGTable的dataset #

除了调用reload()，你也可以直接修改tableParams内部的数据集，这样NGTable的缓存会同步更新，再配合reload()效果更稳妥：

$scope.updateData = function() {
  // 修改原数组数据
  $scope.myData[0].name = "A-修改后";
  
  // 更新tableParams的dataset
  $scope.tableParams.settings().dataset = $scope.myData;
  // 刷新确保生效
  $scope.tableParams.reload();
};

核心逻辑就是强制NGTable放弃旧的缓存数据，重新基于最新的数据源生成分页数据，这样不管你怎么切换页码，显示的都是最新内容啦。

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