如何在AngularJS ng-table中设置与获取每页显示行数？

当然可以！ng-table在分页这块的配置其实挺灵活的，下面我分两部分给你讲清楚怎么设置默认行数，以及怎么获取当前选中的行数：

设置默认选中的每页行数 #

要设置默认显示的行数，你只需要在初始化ngTableParams的时候，给$params里的count属性赋值就行，同时可以通过counts数组定义下拉框里的可选行数选项。举个实际的代码例子：

// 假设你已经注入了ngTableParams到控制器中
angular.module('yourApp').controller('YourController', function($scope, ngTableParams) {
    // 你的数据源，这里用示例数据代替
    var yourData = [/* 你的数据数组 */];

    $scope.tableParams = new ngTableParams({
        page: 1, // 默认显示第一页
        count: 20 // 这里设置默认每页显示20条
    }, {
        counts: [10, 20, 50, 100], // 下拉框里的可选行数选项
        data: yourData // 绑定你的数据源
    });
});

这样页面加载时，分页栏的下拉框就会默认选中20条，同时下拉选项里会显示你定义的10、20、50、100这些选项。

获取当前选中的每页行数 #

要获取用户当前选择的行数，直接访问tableParams.$params.count就可以拿到。如果需要实时监听行数变化的话，可以用AngularJS的$watch或者监听tableParams的变化事件：

方式1：直接获取当前值 #

在需要的地方（比如按钮点击事件、业务逻辑处理中）直接调用：

var currentPageSize = $scope.tableParams.$params.count;
console.log('当前每页显示行数：', currentPageSize);

也可以直接在模板中绑定显示：

<p>当前每页显示：{{ tableParams.$params.count }} 条记录</p>

方式2：实时监听行数变化 #

如果需要在用户切换行数时触发一些逻辑，可以用$watch监听变化：

$scope.$watch('tableParams.$params.count', function(newCount, oldCount) {
    if (newCount !== oldCount) {
        console.log('每页行数从', oldCount, '切换为', newCount);
        // 这里可以添加你需要的业务处理逻辑
    }
});

这样就能轻松实现你要的两个需求啦！

内容的提问来源于stack exchange，提问作者Joram