发表于: 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>



返回列表 返回列表
评论

    分享到