首页 > 代码库 > AngularJS directive 分页,待续...
AngularJS directive 分页,待续...
简单写了一点分页的功能，没有注释没有完成啥都没有，只是写了一下思路..待续
<!DOCTYPE html><html data-ng-app="myPage"><head> <title></title> <script src="../js/angular.min.js"></script></head><body data-ng-controller="myPageController"><div page data-items-source="itemsSource" data-page-size="pageSize" data-current-page="currentPage"></div></body><script> var myPage = angular.module(‘myPage‘, []); myPage.controller(‘myPageController‘, function ($scope) { $scope.itemsSource = [ { Id: 1, name: ‘Jackey1‘ }, { Id: 2, name: ‘Jackey2‘ }, { Id: 3, name: ‘Jackey3‘ }, { Id: 4, name: ‘Jackey4‘ }, { Id: 5, name: ‘Jackey5‘ }, { Id: 6, name: ‘Jackey6‘ }, { Id: 7, name: ‘Jackey7‘ }, { Id: 8, name: ‘Jackey8‘ }, { Id: 9, name: ‘Jackey9‘ }, { Id: 10, name: ‘Jackey10‘ }, { Id: 11, name: ‘Jackey11‘ }, { Id: 12, name: ‘Jackey12‘ }, { Id: 13, name: ‘Jackey13‘ }, { Id: 14, name: ‘Jackey14‘ }, { Id: 15, name: ‘Jackey15‘ }, { Id: 16, name: ‘Jackey8‘ } ]; $scope.pageSize = 5; $scope.currentPage = 1; }); myPage.directive(‘page‘, function () { return { restrict: ‘A‘, templateUrl: ‘template/page.html‘, scope: { itemsSource: ‘=‘, pageSize: ‘=‘, currentPage: ‘=‘ }, controller: function ($scope) { $scope.getPageNum = function () { var pageNum = 0, temp = 0; temp = $scope.itemsSource.length % $scope.pageSize; if (temp === 0) { pageNum = Math.round($scope.itemsSource.length / $scope.pageSize); } else { pageNum = Math.round($scope.itemsSource.length / $scope.pageSize) + 1; } return pageNum; }; $scope.getPageShowArray = function (currenPage, len) { var result = []; if (currenPage - 1 === 0) { var resultLen = len > $scope.pageNum ? $scope.pageNum : len; for (var i = 0; i < resultLen; i++) { result.push(i + 1); } } else { var resultLen = len > $scope.pageNum ? $scope.pageNum : len; for (var i = 0; i < resultLen; i++) { result.push(currenPage - 1 + i); } } return result; }; $scope.showPage = function (Id) { $scope.currentPage = Id; var start = (Id - 1) * $scope.pageSize; var end = Id * $scope.pageSize; $scope.showItems = $scope.itemsSource.slice(start, end); console.log($scope.showItems); }; $scope.prevClick=function () { var Id = ($scope.currentPage - 1) == 0 ? 1 : $scope.currentPage - 1; $scope.showPage(Id); }; $scope.nextClick = function () { var Id = $scope.currentPage + 1 > $scope.pageNum ? $scope.pageNum : $scope.currentPage + 1; $scope.showPage(Id); }; }, link: function (scope, element, attr) { scope.pageNum = scope.getPageNum(); scope.pageBoxArray = scope.getPageShowArray(scope.currentPage, 5); } }; });</script><style> .page { width: auto; height: 30px; overflow: hidden; } .pageBox { width: 20px; height: 20px; border: 1px solid gray; line-height: 20px; text-align: center; float: left; margin-left: 15px; cursor: pointer; } .pageBox:hover { background: yellow;; } .prevBtn { width: 50px; height: : 20 px; float: left; cursor: pointer; border: 1px solid gray; text-align: center; line-height: 20px; } .nextBtn { width: 50px; height: 20px; float: left; cursor: pointer; border: 1px solid gray; margin-left: 10px; text-align: center; line-height: 20px; }</style></html>
templateUrl
<div class="page"><div class="prevBtn" data-ng-click="prevClick()">prev</div><div class="pageBox" data-ng-repeat="item in pageBoxArray" data-ng-click="showPage(item)">{{item}}</div><div class="nextBtn" data-ng-click="nextClick()">next</div> </div>
后期想实现的功能是，直接给page的directive数据源和需要显示的条数，directive提供接口返回当前页的数据，然后再把数据给另外一个显示数据的direcive绑定到模板上...
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。