appTest.controller('testController', function ($scope,$document,$http) {
$scope.datasize = 0;
$scope.itemPerPage = 3;
$scope.showOnPage = 0;
$scope.page = 0;
$scope.load = function () {
$http.get('http://localhost/test/test.json').success(function (data) {
$scope.licenses = data;
$scope.datasize = data.length;
$scope.isDataEmpty();
$scope.makePagination();
});
};
$document.on('ready',function() {
$scope.load();
});
$scope.isDataEmpty = function() {
var licTable = angular.element(document.querySelector('.lic-table'));
var emptyAlert = angular.element(document.querySelector('.message'));
if ($scope.datasize === 0) {
licTable.css('display','none');
emptyAlert.addClass('show');
}
else {
licTable.css('display','table');
emptyAlert.removeClass('show');
}
};
$scope.setPage = function(page) {
var newPage = page * $scope.itemPerPage;
console.log(newPage);
$scope.showOnPage = newPage;
};
$scope.makePagination = function() {
var pageCount = Math.ceil($scope.datasize / $scope.itemPerPage);
var pagination = angular.element(document.querySelector('.pagination'));
for (var i = 0; i < pageCount; i++) {
var a = angular.element('<a>');
a.attr('href','#'+i);
/* Здесь вешаем событие, для переключения страниц. Но при клике ничего не обновляется */
a.on('click',function(e){
var page = e.target.text;
/* Хотя в лог пишутся данные */
$scope.setPage(page);
});
a.text(i);
pagination.append(a);
var li = angular.element('<li>');
if ($scope.page === i) {
li.addClass('active');
}
a.wrap(li);
}
}
});<!DOCTYPE html>
<html lang="" ng-app="appTest">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Test</title>
<style type="text/css">
.hide {
display: none;
}
.show {
display: block;
}
</style>
<!-- Bootstrap CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div ng-controller="testController">
<div class="alert alert-info hide message">Нет записей для отображения!</div>
<table class="table table-strict lic-table" >
<thead>
<tr>
<th>ID</th>
<th>KEY</th>
<th>EMAIL</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="lic in licenses | limitTo: itemPerPage : showOnPage">
<td>{{lic.id}}</td>
<td>{{lic.key}}</td>
<td>{{lic.email}}</td>
</tr>
</tbody>
</table>
<ul class="pagination">
</ul>
<h1 ng-bind="showOnPage"></h1>
</div>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers/testController.js"></script>
</body>
</html>
a.on('click', function(e) {
var page = e.target.text;
$scope.setPage(page);
// обновляем скоуп
$scope.$apply();
});<ul class="pagination">
<li ng-repeat="page in pages">{{page}}</li>
</ul><ul class="pagination">
<li ng-repeat="page in pages" ng-click="openPage(page)">{{page}}</li>
</ul><ul class="pagination">
<li ng-repeat="page in pages">
<a ng-href="/page/{{page}}">{{page}}</a>
</li>
</ul>
Простой
Простой
Средний
