Angular JS Magazine

joi, 4 septembrie 2014

Pagination with Angular JS

Angular JS can be very helpful to provide products like pagination. Below, you can see a sample of paginating some images:

<!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>