AngularJS“跳转到页面”分页

时间:2018-11-05 04:05:40

标签: javascript angularjs

我有一个分页功能,我想创建一个文本框和按钮,用户可以在其中输入他们想要进入的页码。有没有办法做到这一点?如果能获得参考链接或其他内容,将不胜感激。谢谢!

我的HTML:

<div class="pagingDiv">
<button class="btnPaging" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button class="btnPaging" ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
    Next
</button>
</div>

JS:

                 $scope.currentPage = 0;
                 $scope.pageSize = 4;
                 $scope.data = [];
                 $scope.numberOfPages=function(){
                     return Math.ceil($scope.data.length/$scope.pageSize);
                 }
                 for (var i=0; i < $scope.displayPage.length; i++) {
                     $scope.data.push("Item "+ i);
                 }

目前的样子

enter image description here

预期结果:

enter image description here

1 个答案:

答案 0 :(得分:2)

使用文本框并将模型currentPage绑定到它。

    <button class="btnPaging" ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
Next
    </button>
    <input ng-model="currentPage" type="text">
    <button type="button" ng-click="ChangePage()"></button>

您可以在角度文件上使用ChangePage函数来更改页面。并使用文本框绑定当前页面变量。