Angularjs分页指令

PHPABC angularjs 603 次浏览 没有评论

分页做得越来越多,每次都需要复制一大堆代码,很烦,觉着应该弄个分页指令封装下。不废话了,直接上代码。

JS部分

//指令部分 directives.directive('xlPage', [function () {     return {         replace: true,         templateUrl: '/views/directive/xl-page.html',         link: function (scope, ele, attrs) {             scope.currentPage = 1;//当前页数             scope.count = 0;//总条数             scope.pageSize = attrs.size;//分页大小             scope.totalPage = 1;//总页数             scope.pages = [];//分页数组             if (!scope[attrs.method]) {                 throw new Error('load method is undefined');             }             scope.next = function () {                 if (scope.currentPage < scope.totalPage) {                      scope.currentPage++;                      scope.getData();                                  }                          };                          scope.prev = function () {                                  if (scope.currentPage > 1) {                     scope.currentPage--;                     scope.getData();                 }             };             //调用             scope.getData = function (page) {                 page && (scope.currentPage = page);                 scope[attrs.method](scope.currentPage, scope.pageSize, function (data) {                     scope.totalPage = Math.ceil(data.count / scope.pageSize);                     if (scope.currentPage > 1 && scope.currentPage < scope.totalPage) {                                                   scope.pages = [                              scope.currentPage - 1,                              scope.currentPage,                              scope.currentPage + 1                          ];                                          } else if (scope.currentPage == 1 && scope.totalPage > 1) {                         scope.pages = [                             scope.currentPage,                             scope.currentPage + 1                         ];                     } else if (scope.currentPage == scope.totalPage && scope.totalPage > 1) {                         scope.pages = [                             scope.currentPage - 1,                             scope.currentPage                         ];                     }                     scope.list = data.list;                 });             };             scope.getData();         }     } }]);  //控制器部分 controllers.controller('CourseListController', ['$rootScope', '$scope', '$http', function ($rootScope, $scope, $http) {     $scope.list = [];     $scope.keyword = '';     $scope.load = function (page, size, callback) {         $http.get($rootScope.api + '/course/list?keyword=' + $scope.keyword + '&page=' + page + '&size=' + size).success(function (data) {             callback && callback(data);         });     }; //JSON {  "count": "2",  "list": [  {  "user_id": "12",  "email": "admin@ddhigh.com",  "nickname": "拖鞋",  "avatar": "http://q.qlogo.cn/qqapp/101191761/0D040ED029959BB79FD1A0927FD48989/100",  "sex": "1",  "status": "1",  "phone": "",  "description": null,  "created_at": "1427303955",  "score": "0"  },  {  "user_id": "4",  "email": "xxx@qq.com",  "nickname": "111",  "avatar": "",  "sex": "1",  "status": "1",  "phone": "",  "description": null,  "created_at": "1426777188",  "score": "0"  }  ] }

 HTML部分

<!--指令调用代码--> <xl-page size="30" method="load"></xl-page> <!--指令模板[xl-page.html]--> <ul class="pagination" ng-show="totalPage>1">     <li ng-class="{true:'active'}[currentPage==1]"><a href="javascript:void(0)"                                                       ng-click="currentPage=1;getData()">首页</a></li>     <li ng-class="{true:'disabled'}[currentPage==1]"><a href="javascript:void(0);" ng-click="prev()">上一页</a></li>     <li ng-repeat="page in pages" ng-class="{true:'active',false:''}[currentPage==page]"><a href="javascript:void(0);"                                                                                    ng-click="getData(page)">{{         page }}</a></li>     <li ng-class="{true:'disabled'}[currentPage==totalPage]"><a href="javascript:void(0);" ng-click="next()">下一页</a>     </li>     <li ng-class="{true:'active'}[currentPage==totalPage]"><a href="javascript:void(0)"                                                               ng-click="currentPage=totalPage;getData()">末页</a></li> </ul> 

分页指令到这里就结束了,希望大家举一反三–。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go