AngularJs自定义分页
2016-01-21 09:28
555 查看
创建一个Html分页的模板
RepeatRange的filter
定义指令
<div> <ul> <li class="pageleft" ng-click="PrevGroup()"> <!--<a href="#"><</a>--> </li> <li class="pagepublic" ng-class="{pageliselect:($index+1+settings.pageRangeIndex*settings.pageRange==pageIndex)}" ng-repeat="item in []|RepeatRange:pageShowRange" ng-click="ChangePage($index + 1 + settings.pageRangeIndex * settings.pageRange)"> <a href="#" class="pageaunselect">{{$index+1+settings.pageRangeIndex*settings.pageRange}}</a> </li> <li class="pageright" ng-click="NextGroup()"> <!--<a href="#" aria-label="Next">></a>--> </li> </ul> </div>
RepeatRange的filter
App.filter('RepeatRange', function () { return function (input, total) { total = parseInt(total); for (var i = 0; i < total; i++) { input.push(i); } return input; } })
定义指令
App.directive('dirPage', [function () { return { restrict: 'A', scope: { pageChange: "=", pageModel: "=dirPage", }, replace: true, templateUrl: 'spa/plugins/page/template/page.html', link: pageLink } }]); function pageLink(scope, element, attrs) { function initSettings() { if (!scope.settings) { scope.settings = {}; } if (!scope.settings.pageSize) { scope.settings.pageSize = 10; } if (!scope.settings.pageRange) { scope.settings.pageRange = 10; } if (!scope.settings.pageRangeIndex) { scope.settings.pageRangeIndex = 0; } } initSettings(); function initPageChange() { if (scope.pageModel.pageSize) scope.settings.pageSize = scope.pageModel.pageSize; if (scope.pageModel.pageRange) scope.settings.pageRange = scope.pageModel.pageRange; scope.totalCount = scope.pageModel.totalCount; scope.pageIndex = scope.pageModel.pageIndex; if (scope.pageModel.totalCount % scope.settings.pageSize > 0) scope.pageCount = parseInt(scope.pageModel.totalCount / scope.settings.pageSize) + 1; else scope.pageCount = parseInt(scope.pageModel.totalCount / scope.settings.pageSize) if (scope.pageCount - scope.settings.pageRange * scope.settings.pageRangeIndex > scope.settings.pageRange) scope.pageShowRange = scope.settings.pageRange; else scope.pageShowRange = scope.pageCount - scope.settings.pageRange * scope.settings.pageRangeIndex; } initPageChange(); scope.ChangePage = function (pageIndex) { scope.pageIndex = pageIndex; if (scope.pageChange) { scope.pageChange(pageIndex); } } scope.PrevGroup = function () { if (scope.settings.pageRangeIndex >= 1) { scope.settings.pageRangeIndex-- initPageChange(); } } scope.NextGroup = function () { if (scope.pageCount - scope.settings.pageRange * scope.settings.pageRangeIndex > scope.settings.pageRange) { scope.settings.pageRangeIndex++ initPageChange(); } } }
相关文章推荐
- 利用angular指令监听ng-repeat渲染完成后执行脚本
- 如何用angularjs制作一个完整的表格之五__完整的案例
- 如何用angularjs制作一个完整的表格之四__自定义ng-model标签的属性使其支持input之外的html元素
- 使用angularjs创建简单表格
- angularjs表格分页功能详解
- angularjs在ng-repeat中使用ng-model遇到的问题
- angular 之 $rootElement
- 如何用angularjs制作一个完整的表格之三__在ng-repeat中使用ng-model
- ZH奶酪:JavaScript调用AngularJS的函数/$scope/变量
- Angular-seed 入门
- 如何用angularjs制作一个完整的表格之二__表格分页功能
- 如何用angularjs制作一个完整的表格之一__创建简单表格
- [angular]学习笔记
- AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID
- AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID
- AngularJS入门小结
- angularjs 中通过ui-router设置不同网页不同<title>内容
- AngularJS带给你一个简单完善的Demo
- Angularjs service vs factory vs provider
- angularjs 1.3版本以上采坑全纪录