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
.