AnglarJS directive改ページ、続きは…
38596 ワード
简単にページを书きました.コメントがなくて、何もできませんでした.ただ考えを书きました.続きます.
<!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><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>