angularjs之ui Bootstrap翻页效果
2017-07-28 11:16
218 查看
基本逻辑思维
获取列表的个数
每页显示多少个
当前是第几页
获取列表的个数
每页显示多少个
当前是第几页
$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条数据 }
相关文章推荐
- angularjs之ui-bootstrap的使用
- UIBootatrap:是由AngularJS UI团队编写的纯AngularJS实现的Bootstrap组件
- angularjs之ui-bootstrap和ui-router结合使用
- 使用angularjs,bootstrap快速实现手风琴效果
- Angularjs中的ui-bootstrap的使用教程
- Angularjs第三方插件ui-bootstrap-tpls.min.js和ui-bootstrap.min.js的区别、差异、不同
- AngularJS开发WebApp高亮跳转按钮效果,ui-sref和ui-sref-active的使用
- angularJs 中的ui-bootstrap 插件$uibModal 问题总结
- angularJs-UI-bootstrap系列教程1(使用前的准备)
- Bootstrap实现翻页效果
- angularJs 中的ui-bootstrap 插件pagination使用总结
- angularJs 中的ui-bootstrap 插件pagination使用总结
- angularjs,bootstrap快速创建手风琴效果
- jquery-ui-bootstrap动态添加和删除标签页封装【效果更炫】
- angularjs之ui-bootstrap的使用
- Android 实现书籍翻页效果
- Android 翻页效果 电子书
- android ui listview 下拉刷新,上滑动刷新效果
- Angularjs 实现移动端在线测评效果
- iOS开发 实现界面跳转翻页等效果