AngularJS trNgGrid分页的自定义页面大小

Question

我正在使用trNgGrid创建一个Angular表。它工作正常，但我需要实现自定义分页，这意味着用户应该能够选择每页显示的页面项数。

我在这里浏览了TrNgGrid全局选项： https://moonstorm.github.io/trNgGrid/release/#/GlobalOptions

但我不确定如何以及在何处设置此属性＆＃34; filtered-items-page＆＃34;实现自定义分页以及如何与HTML输入进行对话。正如网站上所建议的那样，我在html-table标签上为它分配了一个空数组，如示例中所述，但这并没有多大帮助。

Here is my JS:
...
 $scope.pageItemsCount = 10;
 ..
 $scope.$watchCollection("pageItemsCount", function(){
 // This is not being triggered when the page count changes through the HTML control-box as displayed on their demo page.           
 alert('pageItemsCount has changed, new value is: ' + $scope.pageItemsCount)
        });
..
..

My HTML: 
..
<table tr-ng-grid="" items="myItems" selected-items="selectedItems" selection-mode="None" page-items="pageItemsCount" filtered-items-page="[]">
..
<div class="form-group">
   <label class="col-md-7 control-label"">Items displayed per page :</label>
        <div class="col-md-2">
            <input class="form-control ng-valid ng-valid-min ng-touched ng-valid-number ng-dirty" type="number" ng-model="pageItemsCount" min="1"/>
        </div>
</div>

为了清楚起见，这是我想要的功能：

对于AngularJS和trNgGrid来说，这是一个安静的新人，对此非常感激。

谢谢！

Answer 1

您可以使用

设置分页

<table class="table table-bordered" tr-ng-grid=""
      items="gridSettings.data" page-items="gridSettings.pageSize"
      current-page="gridSettings.currentPage" selection-mode="gridSettings.selectionMode">

并将控制器中的选项设置为

  $scope.gridSettings = {
      pageSize: 100,
      currentPage: 0,
      enableSorting: false,
      selectionMode: 'None',
      totalItems: $scope.myItems.length,
      data: $scope.myItems
    };

您可以根据模型变量设置pageSize。

以下是 WORKING DEMO