I want to return a query using AngularJS and, when displaying on the screen using ng-Repeat , display only the first 10 records, and append 5 in 5 records, using the scrollbar * or just by clicking a button. >
Ex: Virtual stores that show the products when the scrollbar scrolls down. But I'd rather have you using an action by clicking a button.
To create your function, simply insert a new button and have it call the "load more" function. For example:
html:
<div ng-click="carregaMais()" ng-if="botaoAtivo">Carregar mais</div>
function (in my case, it is in the 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();
};
It's all well documented, I think it will be easy to understand. To create the function loads with the scroll, you will need other methods. In fact, there are already many other ready, like this one , that you just call the same function used in the click, both will work .
And your table, or whatever you are displaying the data, must have an ng-repeat'' with the property limitTo: XX , which will limit the display according to that value, thus:
ng-repeat="lista in minhaLista | limitTo:limiteValor"
The name 'limitValue' is just a reference to the value started inside controller , but you can set it in the DOM itself, no problem. This makes it more dynamic and less error-prone.
One important note is about using AngularJs and jQuery . Like you, at first I was trying very hard to use the functions in jQuery , because I thought 'easier'. But avoid this. AngularJs has several tools and methods that you can do well to say everything that jQuery does. So, try to stay just in AngularJs .