Paginação com AngularJS e WebAPI

Question

Preciso fazer uma paginação usando AngularJS. Bem, fiz uma controller para popular uma Table HTML. Isso agora tá funcionando. O meu próximo passo será paginar essa table. Peguei um exemplo na internet, só que o exemplo o cara faz um for de 1 até 1000 e sai paginando. No meu caso é diferente, eu recebo um JSON do meu REST e necessito paginar isso, separa em bloco de 10, como eu recebo 40 registros serializados, daria 4 páginas de 10. Fiz uma controller.js somente para isso, é o certo, para separar bem. Cada caso um caso. Abaixo a minha controller:

var pagina = angular.module('app', []);

pagina.controller("PaginacaoController", function ($scope) {
    $scope.filteredTodos = []
   , $scope.currentPage = 1
   , $scope.numPerPage = 10
   , $scope.maxSize = 5;

    $scope.makePagina = function () {
        $scope.pagina = [];
        for (i = 1; i <= 1000; i++) {
            $scope.pagina.push({ text: "Teste " + i, done: false });
        }
    };

    $scope.makePagina();

    $scope.$watch("currentPage + numPerPage", function () {
        var begin = (($scope.currentPage - 1) * $scope.numPerPage)
        , end = begin + $scope.numPerPage;

        $scope.filteredPagina = $scope.pagina.slice(begin, end);
    });

})

Tenho duas dúvidas aí:

1) Na segunda function(), a do for, creio que eu devo colocar um data e pegar o data.items(dessa forma eu pego o JSON para popular a table), mas data.items.length, não funfa, comigo deu erro.

2) Veja que $scope.numPerPage está fixo em 10, mas nesse caso não sei quantos registros vêm e a paginação deveria ser dinâmica.

Abaixo a minha view, que hoje funciona para popular a table:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Tipo Contato Operadora</h2>

<div data-ng-controller="TipoContatoOperadoraController">
    <div class="panel panel-default">
        <div class="panel-heading">Lista de Tipo de Contato das Operadoras</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                        <strong>{{erro}}</strong>
                    </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <tr>
                                    <th>Cod. Tipo Contato</th>
                                    <th>Nome Tipo Contato</th>
                                    <th>Ind. Tipo Contato</th>
                                    <th>Data Atualização</th>
                                    <th>Cod. Usuário</th>
                                </tr>
                                <tr data-ng-repeat="lista in listaTipoContatoOperadora">
                                    <td>{{ lista.id }}</td>
                                    <td>{{ lista.nome }}</td>
                                    <td>{{ lista.tipoContato }}</td>
                                    <td>{{ lista.dataUltimaAtualizacao }}</td>
                                    <td>{{ lista.loginUltimaAtualizacao }}</td>
                                </tr>
                            </table>
                        </div>                    
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Se coloco duas controller, a minha view se perde. A Controller atual para receber o JSON é essa. Preciso a da paginação ou colocar a paginação dentro dessa.

var app = angular.module('app', []);

app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController])

function TipoContatoOperadoraController($scope, $http) {

    $http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
        .success(function (data) {

            $scope.listaTipoContatoOperadora = data.items;
        })
        .error(function () {
            //$scope.dt = 'Teste: ' + $scope.data;
            $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
        });

}

Ficou assim minha controller e mesmo assim não pagina:

var app = angular.module('app', []);

app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController])

function TipoContatoOperadoraController($scope, $http) {

    $scope.filteredTodos = []
   , $scope.currentPage = 1
   , $scope.numPerPage = 10
   , $scope.maxSize = 5;

    $http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
        .success(function (data) {

            $scope.listaTipoContatoOperadora = data.items;

            $scope.makePagina = function (data) {
                $scope.pagina = [];
                for (i = 1; i <= data.items.lehgth; i++) {
                    $scope.msg = "Teste " + i;
                    $scope.pagina.push({ text: "Teste " + i, done: false });
                }
            };

            $scope.makePagina();

            $scope.$watch("currentPage + numPerPage", function () {
                var begin = (($scope.currentPage - 1) * $scope.numPerPage)
                , end = begin + $scope.numPerPage;

                $scope.filteredPagina = $scope.pagina.slice(begin, end);
            });

        })
        .error(function () {
            //$scope.dt = 'Teste: ' + $scope.data;
            $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
        });

}

Fiz essa alteração e funcionou. O que faltou foi o AngularJS-UI e o CSS ou Bootstrap, montar a navegação das páginas, mas isso funcionou.

$http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
        .success(function (data) {

            $scope.filteredTodos = []
              , $scope.currentPage = 1
              , $scope.maxSize = 5
              , $scope.numPerPage = data.items.length / $scope.maxSize;

            $scope.listaTipoContatoOperadora = data.items;
            var t = data.items.length;
            console.log(t);

            $scope.makePagina = function () {
                $scope.pagina = [];
                for (i = 1; i <= data.items.length; i++) {
                    $scope.pagina.push({ text: "Página " + i, done: false });
                }
            };

            $scope.makePagina();

            $scope.$watch("currentPage + numPerPage", function () {
                var begin = (($scope.currentPage - 1) * $scope.numPerPage)
                , end = begin + $scope.numPerPage;

                $scope.filteredPagina = $scope.pagina.slice(begin, end);
            });

        })
        .error(function () {
            //$scope.dt = 'Teste: ' + $scope.data;
            $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
        });

Answer 2

Funcionou que eu quero dizer é mostrar os textos das páginas, mas ainda tenho muito trabalho a fazer. Mas fazer outro post agora para o slice do JSON.

Answer 3

EDIÇÃO 4

Consegui fazer o slice com esse código. Só não estou conseguindo trazer os botões de navegação entre as páginas:

var app = angular.module('app', []);

app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController])

function TipoContatoOperadoraController($scope, $http) {



    $http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
        .success(function (data) {

            $scope.filteredPagina = []
              , $scope.currentPage = 1
              , $scope.maxSize = 5
              , $scope.numPerPage = data.items.length / $scope.maxSize;

            $scope.listaTipoContatoOperadora = data.items;

            $scope.makePagina = function () {
                $scope.app = [];
                for (i = 1; i <= data.items.length; i++) {
                    $scope.app.push({ text: "Página " + i, done: false });
                }
            };

            $scope.makePagina();

            $scope.$watch("currentPage + numPerPage", function () {
                var begin = (($scope.currentPage - 1) * $scope.numPerPage)
                , end = begin + $scope.numPerPage;

                $scope.filteredPagina = $scope.listaTipoContatoOperadora.slice(begin, end);
            });

        })
        .error(function () {
            //$scope.dt = 'Teste: ' + $scope.data;
            $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
        });

}

E minha view(apenas as TD's) ficou assim:

<tr data-ng-repeat="lista in filteredPagina">
    <td>{{ lista.id }}</td>
    <td>{{ lista.nome }}</td>
    <td>{{ lista.tipoContato }}</td>
    <td>{{ lista.dataUltimaAtualizacao }}</td>
    <td>{{ lista.loginUltimaAtualizacao }}</td>
</tr>

Apenas alterei o foreach para a(s) página(s) filtrada(s)