下拉选择ng-table中的选项分页

Question

我需要创建一个带分页的动态ng表。但我想用下一个和上一个按钮选择选项“显示50,100，全部”来创建一个下拉列表。

Answer 1

您可以轻松更改分页模板，例如example， 在您的情况下，您可以合并ngtable和jseppi dropdown plugin。 喜欢这里

分页模板

<script type="text/ng-template" id="custom/pager">
        <ul class="pager ng-cloak">
          <li ng-repeat="page in pages"
                ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}"
                ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type">
            <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo; Previous</a>
            <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next &raquo;</a>
          </li>
            <li> 
            <div dropdown-select="ddSelectOptions"
                 dropdown-model="ddSelectSelected"
                 dropdown-item-label="text"
                 dropdown-onchange="params.count(selected.value)" 
                 >

            </div>
            </li>
        </ul>
    </script>

控制器

...
$scope.ddSelectOptions=[{
            text: '10',
            value: 10
        },{
            text: '20',
            value: 20
        },{
            text: '30',
            value: 30
        },
        {
            text: '100',
            value: 100
        },

        ];

        $scope.ddSelectSelected={
            text: '10',
            value: 10
        };

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10           // count per page
    }, {
        total: data.length, // length of data
        getData: function($defer, params) {
            $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
...

工作plunk。

2016年5月8日更新

CDN链接已被破坏，因此在plunk

工作

请注意，答案适用于版本0.3.0，最新版本只有一点点changes {@ 1}}