Load list by parts using Angularjs

Asked

Viewed 2,480 times

7

I want to return a query using Angularjs and, when presenting on the screen using a ng-Repeat, display only the first 10 records, and add 5 out of 5 records using the scrollbar* or just by clicking a button.

Ex: Virtual stores that show the products when you go down the scrollbar. But I have the preference that it was using an action by clicking a button.

angularjs
  • 1

    Please specify your question better, it seems that this missing something, put a clearer and objective example so that we can help you better

  • Hello Arthur, see if you can understand the examples of this https://binarymuse.github.io/ngInfiniteScroll/directive, it does exactly what you want, so if you have any questions we can help you. Here is the example with query in the https://binarymuse.github.io/ngInfiniteScroll/demo_async.htmlbackend.

  • You want to basically do the same as what facebook does only it will display 10 records and then scroll 5 in 5 records at a time, that’s it?

  • Galera exactamento, I had seen using Jquery using scrollbar function, but as I am in the Angular JS, it is more difficult to find!

  • Angular JS works well with jquery. it even has a minimized: Jqlite: https://docs.angularjs.org/api/ng/function/angular.element

  • I had preferred it to be using an action by clicking a button.

  • take a look here: http://infiniteajaxscroll.com/

  • here is more: https://binarymuse.github.io/ngInfiniteScroll/

  • The idea is only to hide the other records or each time you click the button make an Ajax call to load more data?

Show 4 more comments

1 answer

12


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’s 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();
};

Everything is well documented, I think it will be easy to understand. To create the click function with scroll, you will need other methods. Even, there are already many others ready, like this one, just call the same function used in the click, both will work.

And your table, or however 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 'limiteValor' is only reference to the value started within the controller, but you can set in the DOM itself, no problem. So it becomes more dynamic and less prone to errors.

An important observation is about the use of AngularJs and jQuery. Just like you, at first I tried very hard to use the functions in jQuery, because he thought it was easier. But avoid it. The AngularJs has several tools and methods that you can do well to say all that the jQuery makes. So, try to stay on AngularJs.

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.