问题描述
限时送ChatGPT账号..我正在尝试使用 uib-pagination
在我的 Angular 应用程序中保持分页.我无法找到正确的方法来做到这一点.
HTML
<头><tr class="table-head"><th>姓名</th></tr></thead><tr ng-repeat="候选人中的人"><th><div>{{person}}</div></th></tr></tbody>控制器
$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 =[姓名1"、姓名2"、姓名3"、姓名4"、姓名5"、"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);});函数 setPagingData(page) {var pagedData = allCandidates.slice((page - 1) * $scope.itemsPerPage,页 * $scope.itemsPerPage);$scope.aCandidates = pagedData;}});
<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.2" rel="样式表" href="https://maxcdn.bootstrapcdn/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/1.4.9/angular.js" data-semver="1.4.9"></脚本><script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit/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"><头><tr class="table-head"><th>姓名</th></tr></thead><tr ng-repeat="候选人中的人"><th><div>{{person}}</div></th></tr></tbody><uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></uib-pagination>I am trying to keep pagination in my Angular application using uib-pagination
. I am unable to get proper way to do this.
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>
Controller
$scope.totalItems = $scope.aCandidates.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 10;
I am able to see the pagination bar but no action is performed with that and the entire table data is rendered even after giving total-items as 10.
How exactly uib-pagination works and how is the data (in this case aCandidates
) is linked to pagination.
解决方案 The part you are missing is that you have to have a function to get the current page's data from your entire array. I've added a function called setPagingData()
to handle this.
You can see this in the forked 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/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/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/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>
这篇关于如何对使用 ng-repeat 生成的表使用 UI Bootstrap 分页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
本文发布于:2023-04-21 06:43:09,感谢您对本站的认可!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:ng
- 上一篇: PR常见问题「六」pr去水印的几种方法
- 下一篇: 不知道怎么去视频水印,看看这些怎样去水印教程
发布评论