angularjs – 如何使用ng-repeat生成的表的UI Bootstrap分页
发布时间:2020-12-17 18:02:01 所属栏目:安全 来源:网络整理
导读:我试图使用uib-pagination在我的Angular应用程序中保持分页.我无法正确地做到这一点. HTML table id="mytable" class="table table-striped" thead tr class="table-head" thName/th /tr /thead tbody tr ng-repeat="person in aCandidates" th div{{person}
我试图使用uib-pagination在我的Angular应用程序中保持分页.我无法正确地做到这一点.
HTML <table id="mytable" class="table table-striped"> <thead> <tr class="table-head"> <th>Name</th> </tr> </thead> <tbody> <tr ng-repeat="person in aCandidates"> <th> <div>{{person}}</div> </th> </tr> </tbody> </table> 调节器 $scope.totalItems = $scope.aCandidates.length; $scope.currentPage = 1; $scope.itemsPerPage = 10; 我能够看到分页栏但是没有执行任何操作,即使在将总项目设为10之后也会呈现整个表格数据. uib-pagination究竟是如何工作的以及数据(在本例中为aCandidates)如何与分页相关联. 解决方法
您缺少的部分是您必须具有从整个阵列获取当前页面数据的功能.我添加了一个名为setPagingData()的函数来处理这个问题.
您可以在分叉的plunker中看到这一点 var app = angular.module("plunker",["ui.bootstrap"]); app.controller("MainCtrl",function($scope) { var allCandidates = ["name1","name2","name3","name4","name5","name6","name7","name8","name9","name10","name11","name12","name13","name14","name15","name16","name17","name18","name19","name20" ]; $scope.totalItems = allCandidates.length; $scope.currentPage = 1; $scope.itemsPerPage = 5; $scope.$watch("currentPage",function() { setPagingData($scope.currentPage); }); function setPagingData(page) { var pagedData = allCandidates.slice( (page - 1) * $scope.itemsPerPage,page * $scope.itemsPerPage ); $scope.aCandidates = pagedData; } }); <link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" /> <script>document.write('<base href="' + document.location + '" />');</script> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> <script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script> <div ng-app="plunker"> <div ng-controller="MainCtrl"> <table id="mytable" class="table table-striped"> <thead> <tr class="table-head"> <th>Name</th> </tr> </thead> <tbody> <tr ng-repeat="person in aCandidates"> <th> <div>{{person}}</div> </th> </tr> </tbody> </table> <uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></uib-pagination> </div> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |