为什么这个 ng-grid 分页有效答案

【问题标题】：Why is this ng-grid pagination working为什么这个 ng-grid 分页有效
【发布时间】：2015-01-22 01:58:57
【问题描述】：

这是我对以下代码中的 if 条件的理解：

$scope.pagingOptions = {
    pageSizes: [250, 500, 1000],
    pageSize: 250,
    currentPage: 1
};

$scope.$watch('pagingOptions', function (newVal, oldVal) {
    if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
          $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    }
}, true);

每当pagingOptions 发生变化并且currentPage 属性发生变化时，if 条件变为真，因此getPagedDataAsync 方法被执行。

但即使我没有从 UI 更改 currentPage 而是 pageSize，网格也会刷新。我不希望发生这种情况（根据我的理解）。那么为什么要刷新网格呢？

从这里，我取了代码：

http://angular-ui.github.io/ng-grid/ 带有服务器端分页示例标题

【问题讨论】：

您还没有提出任何实际问题。

标签： javascript angularjs ng-grid angularjs-watch

【解决方案1】：

$watch 末尾的true 表示作用域对象pagingOptions 的深度监视。

因此，如果true 作为可选的第三个参数传入，Angular 将进行深度相等检查。因此，pageSize 属性将被检查是否相等并且会有所不同。

$watch 的文档，第三个参数[objectEquality] 是here。

【讨论】：

那么if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage)有什么用，我们可以直接调用getPagedDataAsync 方法。
是的，我认为newVal !== oldVal 在这种情况下是多余的。或者也许这两种情况...... :)

【解决方案2】：

提供的代码似乎包含不必要的复杂性。在执行"object equality watch" 时（通过将$watch 的第三个参数设置为true），将比较对象的属性值而不是对象引用。如果我们假设pageSizes 属性值永远不会改变，那么手表会正确地通知我们，并且只会通知我们pageSize 和currentPage 值的变化。所以里面唯一需要的代码就是页面刷新的调用：

$scope.$watch('pagingOptions', function () {
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}, true);

【讨论】：

【解决方案3】：

再添加一只手表

$scope.$watch('pagingOptions.pageSize', function (newVal, oldVal) {
 if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    }
}, true);

【讨论】：