发表于: 2017-01-08 15:26:39

1 1480


今天完成的事情:

#分页显示效果完成

明天计划的事情:

#过滤显示功能

遇到的问题:

#在制作的过程中,功能已经实现了,但是浏览器还是报了一个错误,。不知道是什么意思,明天回来在处理

收获:

#关键参数

currentPage    当前页码
itemsPerPage   每页的记录数
filter过滤器的初步使用
思路已经对上轮子了

 
myApp.filter('paging',function(){      //paging 过滤器
    return function(lists,start){     //两个参数 lists 是在 html 里你ng-repeat的原始数据:
                                        //  start 也就是 paging 后面传的参数,即 currentPage*listsPerPage
    return lists.slice(start);     //将原始数据按照 start 分割
};
});
 
myApp.controller('demoCtrl',function($scope,$http){  //页面控制器
    $http.get("/student-ajax/students")
        .success(function (data) {
            $scope.names = data.data;
            console.log(($scope.names).length)
 
            $scope.dataNum =  ($scope.names).length;  //获得数据总个数
            $scope.pages = Math.ceil($scope.dataNum/10);         //按照每页显示3个数据,得到总页数
            $scope.pageNum = [];                                //生成页码,在 html里 ng-repeat 出来
            for(var i=0;i<$scope.pages;i++){
                $scope.pageNum.push(i);
            }
 
            $scope.currentPage = 0;                       //设置当前页是 0
            $scope.listsPerPage = 10;                      //设置每页显示 3 个
 
            $scope.setPage = function(num){             // 当点击页码数字时执行的函数
                $scope.currentPage = num;                 //将当前页 设置为 页码数
            }
 
            $scope.prevPage = function(){               //点击上一页执行的函数
                if($scope.currentPage > 0){
                    $scope.currentPage--;
                }
            }
            $scope.nextPage = function(){              //点击下一页执行的函数
                if ($scope.currentPage < $scope.pages-1){
                    $scope.currentPage++;
                }
            }
        });
});



返回列表 返回列表
评论

    分享到