How to make paging with Angularjs and php?

Question

How to make paging with angular and php?

My php:

<?php
include_once("conPDO.php");
$pdo = conectar();

$buscaCidades=$pdo->prepare("SELECT * FROM cidade");
$buscaCidades->execute();

$return = array();

while ($linha=$buscaCidades->fetch(PDO::FETCH_ASSOC)) {
    $return[] = array(
        'idCidade'  => $linha['idCidade'],
        'nome'  => utf8_encode($linha['nome']),
    );
}

echo json_encode($return);
?>

My html:

<div align="center">
<table width="400">
    <tr>
        <td width="200"><b>Cidade</b></td>
        <td width="100"><b>Sala</b></td>
        <td width="100"></td>
    </tr>
    <tr ng-repeat="cidade in cidades">
        <td>{{cidade.nome}}</td>
        <td>{{cidade.sala}}</td>
    </tr>
</table>

My controller:

app.controller("CidadesController", function ($scope, $http, $stateParams, $state) {

var carregaCidades = function () {
    $http.get("admin/php/pegaCidades.php").success(function (data){
        //console.log(data);
        $scope.cidades = data;
    });
};

carregaCidades();

});

Answer 1

I suggest you use one of the various directives on the market.

I particularly found this Exceptional!

Page almost everything in Angularjs !

How to use:

<ul>
    <li dir-paginate="item in items | itemsPerPage: 10"></li>
</ul>

// Em algoum outro lugar na pagina ....

<dir-pagination-controls></dir-pagination-controls>

Answer 2

Here I explain how to do: https://guerrati.wordpress.com/2016/06/08/angularjs-paginacao-no-ng-repeat/

Basically that’s how:

Utilizes the dirPaginate. You need to get down here, then start it on your page:

<script src="dirPagination.js"></script>

And put it as a dependency on your core module:

var app = angular.module('guerraTI', ['angularUtils.directives.dirPagination']);

Now to activate pagination, simply replace ng-repeat with the dir-paginate directive. The only parameter that needs to be added is itemsPerPage, which as its name already says, is the amount of records that will be shown on each page.

<tr dir-paginate="dado in dados|filter:procurar|orderBy:sortKey:reverse|itemsPerPage:5">

After that, you can put the pagination controls:

<dir-pagination-controls max-size="5" boundary-links="true"></dir-pagination-controls>