如何使用AngularJS解决分页错误？
Posted
技术标签:
【中文标题】如何使用AngularJS解决分页错误？【英文标题】：How to solve error in paging using AngularJS? 【发布时间】：2015-03-04 00:50:09 【问题描述】：我正在使用 AngularJS，这是我的代码：
控制器
$scope.totalItems = $scope.lists.length;
$scope.currentPage = 1;
$scope.numPerPage = 8;
$scope.paginate = function (value)
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.lists.indexOf(value);
return (begin <= index && index < end);
索引
<pagination total-items="totalItems" ng-model="currentPage"
max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
截图
我的问题是我想在不同的页面（分页）上显示我的数据，而不是在单个页面上。
我该怎么做？
更新
for (var i = 0; i < 100; i++)
$scope.lists.push('To do ' + i);
【问题讨论】：
你在哪里使用$scope.paginate函数？ @arman1991 我是 Angular 新手，我不认为我理解你的问题 我看不到你在哪里调用 $scope.paginate 函数，无论是在控制器还是 html 中。你只初始化函数，你不会在任何地方调用它，因为它初始化了对分页很重要的属性。 @arman1991 检查我更新的代码行，我刚刚添加了该行，它确实显示了这些数字，但问题是它不显示数据 分页指令不显示数据，只是分页控件，你需要添加一个列表（或其他东西）来显示它，使用绑定的数据作为过滤器。 【参考方案1】：http://embed.plnkr.co/qKLWrClyYvyvGyIPLnLQ/preview 上的快速示例。观看页面并构建要显示的数组
var app = angular.module('pagination', ['ui.bootstrap']);
app.controller('Example', function($scope)
$scope.lists = [
1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,15
];
$scope.totalItems = $scope.lists.length;
$scope.currentPage = 1;
$scope.numPerPage = 8;
$scope.theActualDisplayList = [];
$scope.$watch('currentPage', function(page)
if($scope.currentPage)
var spliceFrom = ($scope.currentPage - 1) * $scope.numPerPage;
var offset = spliceFrom + $scope.numPerPage;
$scope.theActualDisplayList = [];
for (var i = spliceFrom; i < offset; i++)
if(i === $scope.lists.length) return false;
$scope.theActualDisplayList.push($scope.lists[i]);
);
);
<body ng-app="pagination" ng-controller="Example">
<h1>Pagination.</h1>
<ul><li ng-repeat="i in theActualDisplayList track by $index">i</li></ul>
<pagination total-items="totalItems" ng-model="currentPage" max-size="5" boundary-links="true" items-per-page="numPerPage" class="pagination-sm"></pagination>
</body>
【讨论】：
【参考方案2】：在这里http://plnkr.co/edit/CcN7UPKW0EWgYDhuzHpN?p=preview 在我遇到使用 angularjs 的动态分页问题后，我做了一个 plnkr，我认为你可以解决所有问题。有关详细信息，您可以阅读我在http://tutexp.com/angularjs-datagrid-paging-sorting-filtering-using-asp-net-and-mssql/ 上写的帖子 希望你会得到帮助。 如果我们在 $scope.Items 中有项目列表，则在此处进行分页初始化
$scope.currentPage = 1; //current page
$scope.entryLimit = 5; //max no of items to display in a page
$scope.filteredItems = $scope.Items.length; //Initially for no filter
$scope.totalItems = $scope.filteredItems;
$scope.setPage = function (pageNo)
$scope.currentPage = pageNo;
;
$scope.filter = function ()
$timeout(function ()
$scope.filteredItems = $scope.filtered.length;
, 9000);
;
$scope.sort_by = function (predicate)
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
;
如下所示迭代表格行中的列表项
<tr ng-repeat="data in filtered = (Items | filter:'Name':SearchText:false |
filter:'CountryId': CountryId || undefined:true |orderBy : predicate
:reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td><b>data.Name </b></td>
<td>
<b>
data.CountryId == "1" ? 'Bangladesh' : ''
data.CountryId == "2" ? 'India' : ''
data.CountryId == "3" ? 'Pakistan' : ''
data.CountryId == "4" ? 'Vutan' : ''
data.CountryId == "5" ? 'Nepal' : ''
</b>
</td>
</tr>
【讨论】：
以上是关于如何使用AngularJS解决分页错误？的主要内容，如果未能解决你的问题，请参考以下文章
如何在没有选择的情况下使用 angularjs 将每个分页单独导出到 ag 网格数据的 Excel
如何使用带有 AngularJs 的 Jquery Datatable 导出表
如何使用 Hibernate 解决错误“失败，因为启用了'在集合获取上的分页失败'已启用”？
如何解决 angularjs 未捕获的错误：[$injector:modulerr]？