今天主要完成的是翻页功能

分析一下翻页功能，主要有几点，一个是可以设置页面显示几条数据，还可以直接通过点击首页、末页跳转到对应数据页，并且可以点击按钮或输入直接去到对应页

1. 设置页面显示几条数据

首先还是双向绑定

每页显示<input class="number" type="text" size="1" ng-model="parmas.size">条

并设置对应的url传参

url:"/home?type&status&startAt&endAt&size&page",

使页面显示的数据个数可设置

2. 设置页面按钮

$http({
        method: "get",
        url: "/a/a/article/search",
        params: $scope.parmas
    }).then(function success(response) {
        $scope.totalNum = Math.ceil(response.data.data.total/response.data.data.size);
        console.log($scope.totalNum);
        $scope.upperForm = response.data.data.articleList;

        //动态生成页码按钮
    $scope.pageNum = [ ];
        for (var i=0; i<$scope.totalNum ; i++) {
            $scope.pageNum.push(i+1);
        }
    }, function error(response) {
        alert("连接出错")
    });
};

首先通过向上取整的方式计算一共有多少页，然后命名一个新的空数组，通过for循环计算数组中一共有多少项

<span ng-repeat="x in pageNum">
        <button ng-click="xPage()">{{x}}</button>
</span>

在html页面中通过ng-repeat渲染出所有页面的对应按钮

3. 点击跳转到对应页

首先，为所有的按钮绑定一个ng-click事件，使页面点击的时候可以触发对应函数

接下来就是跳页

//页面跳转按钮部分
//点击按钮跳转到首页
$scope.firstPage = function () {
    $state.go('home',{page : 1})
};
//点击跳转到上一页
$scope.prePage = function () {
    if ($scope.parmas.page == 1) {
        $state.go('home',{page : $scope.totalNum})
    } else {
        $scope.parmas.page--;
    }
};
//点击按钮跳转到对应页
$scope.xPage = function () {
    $scope.parmas.page = this.$index + 1;
    $state.go('home',{page : $scope.parmas.page})
};
//点击跳转到下一页
$scope.nextPage = function () {
    if ($scope.parmas.page == $scope.totalNum) {
        $state.go('home',{page : 1})
    } else {
        $scope.parmas.page++;
    }
};
//点击跳转到末页
$scope.lastPage = function () {
    $state.go('home',{page : $scope.totalNum})
};
//点击跳转到自己输入的那页
$scope.jumpPage = function () {
    if ($scope.jPage >= 1 && $scope.jPage <= $scope.totalNum) {
        $state.go('home',{page : $scope.jPage})
    } else {
        alert("请输入正确的页数")
    }
}

首页和末页按钮直接跳转到对应页，动态渲染的按钮通过双向绑定跳转页面，上一页下一页跳转到$scope.parmas.page--和 $scope.parmas.page++页面，如果是首页末页通过if else函数判断

遇到的问题

如果不是在第一页的时候，通过搜索按钮搜索，可能搜索结果只显示一页，但是当前页不是第一页，导致列表部分是空白的

给搜索按钮添加了一个ng-click事件，只要搜索就会跳转到第一页，就解决了这个问题

今天的计划是做上传图片