发表于: 2017-06-15 23:46:04
1 928
今天完成的事情:
基本写完分页。
为分页添加了一些验证。
明天计划的事情:
修改分页bug
写搜索功能。
遇到的问题:
最后限制分页按钮数量时出了一点问题,明天解决。
收获:
知道了分页的实现方法。
1,先是在路由状态后添加变量。
2,然后在$stage.go的状态地址中为变量添加值,通过$stateParames调用。
3,在按钮上设置ng-click,通过ng-click绑定函数,函数中调用$http,随着按钮的点击刷新$http地址。
将按钮设置为最多5个:
$scope.pageIndexes = [];
for (var i = 0; i < Math.ceil($scope.total / $scope.size); i++) {
if ($scope.page - (i + 1) <= 2&&(i + 1) - $scope.page <= 2) {
$scope.pageIndexes[i] = i + 1;
}
}
for (var i = 0; i < $scope.pageIndexes.length; i++) {
if ($scope.pageIndexes[i] == "" || typeof($scope.pageIndexes[i]) == "undefined") {
$scope.pageIndexes.splice(i, 1);
i = i - 1;
}
}
限制input框只能输入数字:
$scope.numOnly1 = function () {
var pattern = /^[^\d]/g;
$scope.size = $scope.size.replace(pattern, "");
}
为点击的按钮添加样式:
<button class="btn btn-default pageIndex" ng-repeat="index in pageIndexes" ng-click="pageIndex(index)" ng-class="{true:'btn-success'}[index==page]">{{index}}
</button>
使用ng-if添加省略按钮:
<button class="btn btn-default" ng-if="page<Math.ceil(total/size)-3">……</button>
评论