Question

我想知道是否可以在Angular Ui Grid中自定义分页页面大小？我在文档中寻找它，但是，我无法找到任何有关它的信息。

我遇到的问题是，当我正在尝试使用时：

 <select ng-model="gridApi.grid.options.paginationPageSize">
    <option>5</option>
    <option>10</option>
    <option>20</option>
    <option>25</option>
 </select>

当角度编译它时，有一个额外的选项添加到Html（我想从ng模型）：

<option value="? number:20 ?"></option>

有什么想法吗？

由于

Answer 1

这似乎对我有用：

var app = angular.module('app', ['ui.bootstrap', 'ui.grid', 'ui.grid.pagination']);

app.controller('MainCtrl', ['$scope', function ($scope) {
   $scope.data = [
     { name: 'Alex', car: 'Toyota' },
     { name: 'Sam', car: 'Lexus' },
     { name: 'Joe', car: 'Dodge' },
     { name: 'Bob', car: 'Buick' },
     { name: 'Cindy', car: 'Ford' },
     { name: 'Brian', car: 'Audi' },
     { name: 'Malcom', car: 'Mercedes Benz' },
     { name: 'Dave', car: 'Ford' },
     { name: 'Stacey', car: 'Audi' },
     { name: 'Amy', car: 'Acura' },
     { name: 'Scott', car: 'Toyota' },
     { name: 'Ryan', car: 'BMW' },
     { name: 'Brad', car: 'Chevrolet' },
     { name: 'Leonard', car: 'Ford' },
     { name: 'Chris', car: 'Dodge' },
     { name: 'Brett', car: 'Hyundai' },
     { name: 'Jim', car: 'Kia' },
     { name: 'Fred', car: 'Nissan' },
     { name: 'Todd', car: 'Volkswagen' },
     { name: 'Gregory', car: 'Audi' },
     { name: 'Martin', car: 'BMW' },
     { name: 'Lisa', car: 'Vauxhall' },
     { name: 'Megan', car: 'Renault' },
     { name: 'Audrey', car: 'Citroen' },
     { name: 'Janelle', car: 'Pugeot' },
     { name: 'Jaquelin', car: 'Lada' },
     { name: 'Rosa', car: 'Mitsubishi' },
     { name: 'Naomi', car: 'Saturn' },
     { name: 'Brittany', car: 'BMW' },
     { name: 'Tracy', car: 'Cadillac' },
     { name: 'Chloe', car: 'Hummer' },
     { name: 'Augustus', car: 'Mercedes Benz' },
     { name: 'Lauren', car: 'Porsche' },
     { name: 'Howard', car: 'Subaru' },
     { name: 'Stan', car: 'Plymouth' },
     { name: 'Kyle', car: 'Honda' },
     { name: 'Kenny', car: 'Suzuki' },
     { name: 'Eric', car: 'Holden' },
     { name: 'Randy', car: 'Chrysler' },
   ];
   
   $scope.numRows = 10;
    
    $scope.rowHeight = 30;
    $scope.headerRowHeight = 30;
    
   $scope.gridOptions = {
     data: 'data',
     totalItems: $scope.data.length,
     minRowsToShow: 5,
     enablePaginationControls: false,
     paginationCurrentPage: 1,
     paginationPageSize: 10,
     paginationPageSizes: [5, 10, 15, 20],
     columnDefs: [
       {name: 'name'},
       {name: 'car'}
     ]
    };
 }]);

<!DOCTYPE html>
<html ng-app="app">

  <head>
    
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script data-require="ui-bootstrap@0.13.3" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css" />
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-pagination="" ng-style="getTableStyle()"></div>
      <div class="text-center" ng-show="gridOptions.totalItems > numRows">
        <pagination class="pagination-sm" total-items="gridOptions.totalItems" items-per-page="gridOptions.paginationPageSize" ng-model="gridOptions.paginationCurrentPage"></pagination>
      </div>

     <select ng-model="gridOptions.paginationPageSize" ng-options="o as o for o in gridOptions.paginationPageSizes"></select>
    </div>
    <script src="app.js"></script>
  </body>

</html>

UI-GRID中的自定义分页页面大小选择器？

1 个答案: