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

Question

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

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

但我不确定如何以及在何处设置此属性“filtered-items-page”以实现自定义分页以及它如何与 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