angularjs之ui Bootstrap翻页效果

原创于 2017-07-28 11:16:26 发布 · 591 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数据 #angularjs #bootstrap #ui

angular 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种基于AngularJS的分页实现方法，详细解释了如何通过计算当前页数、每页显示数量及总数据量来实现动态列表分页。通过具体的代码示例展示了如何切分数据并展示特定页码的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本逻辑思维

获取列表的个数

每页显示多少个

当前是第几页

$scope.currentPage = 1;  //当前页是第一页
$scope.pageSize = 6;   //每页显示6个数据
$scope.totalItems = data.list.length;   //获取数据的个数
$scope.list = data.list;    //获取所有数据列表信息
$scope.pageChanged($scope.currentPage);   //改变当前页数
$scope.pageChanged = function (index) {
  $scope.currentPage = index;   //改变当前页为index
  $scope.collectionlist = $scope.list.slice((index - 1) * $scope.pageSize, index * $scope.pageSize);
	循环的列表信息为 在所有的数据中选取数据，从0开始选择，到当前页乘以每页的数据，显示结果如下
	如果list为60，选取的数据第一页为0 - 1*6 选取第0，1，2，3，4，5条数据 选取数据从0开始
	第二页为(index也就是2-1)*6 —— 2*6  也就是从6开始，到12 选取第6，7，8，9，10，11条数据
}