7

Quero retornar uma consulta utilizando AngularJS e, ao apresentar na tela utilizando um ng-Repeat, exibir apenas os 10 primeiros registros, e acrescentar de 5 em 5 registros, utilizando o scrollbar* ou apenas clicando em um botão.

Ex: Lojas Virtuais que vão mostrando os produtos quando vai descendo o scrollbar. Mas tenho a preferencia de que fosse usando uma ação clicando em um botão.

9

1 Resposta 1

12

Para criar a sua função, basta inserir um novo botão e fazer com que ele chame a função de "carregar mais". Por exemplo:

html:

<div ng-click="carregaMais()" ng-if="botaoAtivo">Carregar mais</div>

função (no meu caso, está no controller):

var valInicial = 10, //Valor inicial a ser carregado
    valAtualiza = 5, //Quantidade a ser atualizada a cada clique
    valAtual = valInicial;
    totalItem = $scope.lista.length; //length total da lista de dados que você possui

$scope.botaoAtivo = true; //Mostra o botão por padrão
$scope.limiteValor = valInicial; //Usado no DOM para limitar exibição na tabela

function loadMore() {
    valAtual += valAtualiza;
    $scope.limiteValor = valAtual;
    if (valAtual >= totalItem) {
        $scope.botaoAtivo = false; //Desativa o botao de carregar mais
        return;
    };
};

$scope.carregaMais = function() { //Chamando a função de 'carregar mais' com clique de botão
    loadMore();
};

Está tudo bem documentado, acho que vai ser fácil de entender. Para criar a função de carrega com o scroll, você vai precisar de outros métodos. Inclusive, já existem muitos outros prontos, como este aqui, que basta você chamar a mesma função usada no clique, ambas irão funcionar.

E a sua tabela, ou seja lá como você está exibindo os dados, deve possuir um ng-repeat``com a propriedade limitTo: XX, que irá limitar a exibição de acordo com aquele valor, ficando assim:

ng-repeat="lista in minhaLista | limitTo:limiteValor"

o nome 'limiteValor' é apenas referência ao valor iniciado dentro do controller, mas você pode definir no próprio DOM, sem problema. Assim ele fica mais dinâmico e menos propício a erros.

Uma observação importante é sobre o uso de AngularJs e jQuery. Assim como você, no começo eu me tentava muito a usar as funções em jQuery, pois achava 'mais fácil'. Mas evite isso. O AngularJs possui diversas ferramentas e métodos que você pode fazer bem dizer tudo que o jQuery faz. Então, tente se manter apenas no AngularJs.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .