<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title></title>
<script src="../angular/angular.min.js"></script>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
<style type="text/css">
ul { list-style: none; }
li { display: inline-block; }
</style>
<script>
angular.module("atpModule", [])
.controller("atpCtrl", function ($scope, $filter) {
$scope.images = [
{ src: "novak.png", alt: "Djokovic, Novak (SRB)" },
{ src: "andy.png", alt: "Murray, Andy (GBR)" },
{ src: "david.png", alt: "Ferrer, David (ESP)" },
{ src: "grigor.png", alt: "Dimitrov, Grigor (BUL)" },
{ src: "milos.png", alt: "Raonic, Milos (CAN)" },
{ src: "rafa.png", alt: "Nadal, Rafael (ESP)" },
{ src: "roger.png", alt: "Federer, Roger (SUI)" },
{ src: "stan.png", alt: "Wawrinka, Stan (SUI)" },
{ src: "tomas.png", alt: "Berdych, Tomas (CZE)" },
{ src: "tonga.png", alt: "Tsonga, Jo-Wilfried (FRA)" }
];
// Paginating products
$scope.currentPage = 0;
$scope.pageSize = 4;
$scope.numberOfPages = function () {
return Math.ceil($scope.images.length / $scope.pageSize);
};
})
// Define a 'startFrom' filter useful for paginating products list
.filter('startFrom', function () {
return function (input, start) {
start = +start;
return input.slice(start);
}
});
</script>
</head>
<body ng-app="atpModule" ng-controller="atpCtrl">
<ul>
<li ng-repeat="item in images | startFrom:currentPage * pageSize | limitTo:pageSize">
<img ng-src="images/{{item.src}}" ng-alt="{{item}}"/>
</li>
</ul>
<!-- Begin Pagination -->
<ul>
<li>
<button type="button" class="btn btn-sm btn-default" ng-disabled="currentPage == 0"
ng-click="currentPage = 0">First Page
</button>
</li>
<li>
<button type="button" class="btn btn-sm btn-default" ng-disabled="currentPage == 0"
ng-click="currentPage = currentPage - 1">Previous
</button>
</li>
<li>
<div id="page">
<span>{{currentPage + 1}} / {{numberOfPages()}}</span>
</div>
</li>
<li>
<button type="button" class="btn btn-sm btn-default"
ng-disabled="currentPage >= images.length / pageSize - 1"
ng-click="currentPage = currentPage + 1">Next
</button>
</li>
<li>
<button type="button" class="btn btn-sm btn-default" ng-disabled="
currentPage >= images.length / pageSize - 1"
ng-click="currentPage = numberOfPages() - 1">Last Page
</button>
</li>
</ul>
</body>
</html>
Niciun comentariu:
Trimiteți un comentariu