Question

我有以下代码，

演示：http://plnkr.co/edit/CIjY45LGDUviCXVWONLQ?p=preview

HTML

<body ng-controller="MyCtrl">
   <input type="text" ng-model="settings.filterOptions.filterText" />
   <div class="list" ng-grid="settings"></div>
</body>

JS

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $filter) {
  $scope.result = [];
  $scope.all_data = [..............];
  $scope.totalServerItems = 0;
  $scope.selectedItems = [];
  $scope.pagingOptions = {
          currentPage : 1,
          pageSize : 10
          };
  $scope.filterOptions = {
          filterText: '',
          useExternalFilter : true
          };
  if(!$scope.settings){
      $scope.settings = {
          enableColumnResize : true,
          pagingOptions : $scope.pagingOptions,
          filterOptions : $scope.filterOptions,
          sortInfo: {fields: [], columns: [], directions: [] },
          jqueryUITheme : true,
          enablePaging : true,
          useExternalSorting : true,
          showFooter : true,
          virtualizationThreshold: 100
      };
  }

  $scope.settings.data = 'result';
  $scope.settings.totalServerItems = 'totalServerItems';
  $scope.settings.selectedItems = $scope.selectedItems;

  $scope.$watch('pagingOptions', function (new_value, old_value) {
      if($scope.filterOptions.filterText != ''){
        return false;
      }
      var pagedData = $scope.all_data.slice((new_value.currentPage - 1) * new_value.pageSize , new_value.currentPage * new_value.pageSize);
      $scope.result = pagedData;
      $scope.totalServerItems = $scope.all_data.length;
      if (!$scope.$$phase) {
          $scope.$apply();
      }
  }, true);

  $scope.$watch('filterOptions', function (new_value, old_value) {
      if(new_value){
          $scope.result = $filter('filter')($scope.all_data, $scope.filterOptions.filterText);
          if (!$scope.$$phase) {
              $scope.$apply();
          }
      }
  }, true);
});

问题

当我使用一些随机关键字进行过滤时，网格变空，但分页按钮未被禁用，我仍然可以单击剩余的页数。有人可以解释我的问题吗？

更新我通过对filterOptions手表做了一个非常小的修改来修复它。看起来像，

演示 http://plnkr.co/edit/ULLg6AuTBprMXEcR7eXC?p=preview

JS

$scope.$watch('filterOptions', function (new_value, old_value) {
      if(new_value){
          $scope.result = $filter('filter')($scope.all_data, $scope.filterOptions.filterText);
          $scope.totalServerItems = $scope.result.length; //This helped out to fix the issue
          if (!$scope.$$phase) {
              $scope.$apply();
          }
      }
  }, true);

提前致谢。

Answer 1

抱歉，我迟到了。

我通过在脚本中添加修改后的页脚模板来实现此目的：

    var ft= "<div ng-show=\"showFooter\" class=\"ngFooterPanel\" ng-class=\"{'ui-widget-content': jqueryUITheme, 

    ....

    "            <button class=\"ngPagerButton\" ng-click=\"pageForward()\" ng-disabled=\"cantPageForward()|| result.length < pagingOptions.pageSize\" title=\"{{i18n.ngPagerNextTitle}}\"><div class=\"ngPagerLastTriangle ngPagerNextTriangle\"></div></button>" +
    "            <button class=\"ngPagerButton\" ng-click=\"pageToLast()\" ng-disabled=\"cantPageToLast()|| result.length < pagingOptions.pageSize\" title=\"{{i18n.ngPagerLastTitle}}\"><div class=\"ngPagerLastTriangle\"><div class=\"ngPagerLastBar\"></div></div></button>" +

    ....

并将其分配给网格：

  $scope.settings = {
    ...
      footerTemplate:ft
  };

我即将离开周末所以我无法彻底测试，但我希望它无论如何都会有所帮助。

这是一个Plunker来玩它。

Answer 2

我通过对filterOptions手表进行非常小的更改来修复它。看起来像，

演示 http://plnkr.co/edit/ULLg6AuTBprMXEcR7eXC?p=preview

<强> JS

$scope.$watch('filterOptions', function (new_value, old_value) {
      if(new_value){
          $scope.result = $filter('filter')($scope.all_data, $scope.filterOptions.filterText);
          $scope.totalServerItems = $scope.result.length; //This helped out to fix the issue
          if (!$scope.$$phase) {
              $scope.$apply();
          }
      }
  }, true);

AngularJS ng-grid分页问题 - 未禁用按钮

2 个答案: