在angularjs中以dir-paginate动态更改页面大小

Question

我在angularjs中使用dir-paginate。我的问题是我应该动态设置页面大小吗？意味着如果我的屏幕分辨率如1280×800,1440×900,1680×1050,1920×1200和2560×1600那么页面大小应相应改变。

<tr dir-paginate="ClientAppr in filteredPhones = ( AllClientApprDtls | filter:search:strict ) | itemsPerPage:pageSize" current-page="currentPage">
    <td class= "col-md-2">{{ClientAppr.persFullName}}</td>
    <td class= "col-md-2"> {{ClientAppr.clientName}} </td>
    <td class= "col-md-1"> {{ClientAppr.activeType}} </td>
    <td class= "col-md-2"> {{ClientAppr.persOffEmail}} </td>
    <td class= "col-md-2"> {{ClientAppr.clientRepTypeDesc}} </td>
</tr>

在此考试itemsPerPage = pageSize

我声明了pagesize = 8，然后每页显示8个项目。

Answer 1

你可以用。 最大尺寸有条件地.. DEMO PLUNKER （可选，默认= 9）指定要显示的最大分页链接数。默认值为9，最小值为5（设置低于5的值不会产生影响）。

所以你的分页html将是

<div class="paginationCont">
    <dir-pagination-controls max-size="size" boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="templates/pagination_ctrls.html"></dir-pagination-controls>
</div>

和脚本

var screenWidth = $window.innerWidth;
    if(screenWidth < 768){
        $scope.size=5;
    } else if (screenWidth >= 768 && screenWidth < 992){
        $scope.size=6;
    }else if (screenWidth >= 991 && screenWidth < 1200){
        $scope.size=7;
    }else if (screenWidth >= 1200){
        $scope.size=8;
    }