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
    Por favor, especifique melhor a sua pergunta, parece que esta faltando algo, coloque um exemplo mais claro e objetivo para que possamos auxilia-lo melhor Commented 16/11/2015 às 12:09
  • Olá Arthur, veja se consegue entender os exemplos desta diretiva binarymuse.github.io/ngInfiniteScroll, ela faz exatamente o que você quer, ai se tiver alguma dúvida podemos ajudá-lo. Aqui é o exemplo com consulta no backend binarymuse.github.io/ngInfiniteScroll/demo_async.html. Commented 16/11/2015 às 12:40
  • Você quer basicamente fazer igual o que o facebook faz só que vai exibir 10 registros e depois rolar de 5 em 5 registros por vez, é isso? Commented 16/11/2015 às 12:44
  • Exatamento galera, ja tinha visto utilizando Jquery usando função scrollbar, porem como sou no no Angular JS, é mais difícil pra achar! Commented 16/11/2015 às 12:48
  • O Angular JS trabalha bem com jquery. ele tem até um minimizado: Jqlite: docs.angularjs.org/api/ng/function/angular.element Commented 16/11/2015 às 12:48

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 .