您的位置:首页 > Web前端 > AngularJS

AngularJs自定义分页

2016-01-21 09:28 555 查看
创建一个Html分页的模板

<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();
}
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: