infinite scroll in Angular Js with external JSON

Question

infinite scroll in Angular Js with external JSON

Navigation

#1 by (2 votes)

6

I'm having a bit of trouble regarding the creation of an infinite scroll in angularJS from a JSON file generated on an external site. What I need is that the infinite scroll be called when the item of variable posts is equal to 10, calling my function again, incrementing +1 in the URL, changing the page. Here is the code:

$scope.posts = [];
    $scope.doRefresh = function(){
        JsonNews.getBlogs($scope);
        $scope.$broadcast('scroll.refreshComplete');
    }
    $page = 0;
    function JsonNews($http, $log){
        $page++;
        $urlInfinite = "http://plantaojti.com.br/noticias/page/"+ $page +"/?feed=json&callback=JSON_CALLBACK";
        this.getBlogs = function($scope){
            $http.jsonp($urlInfinite).success(function(data){
                $scope.posts = data;
                for (var i = 0; i < $scope.posts.length; i++) {
                    this.posts.push(posts[i].data);
                }
                AppCtrl.$scope.doRefresh($scope);
            });
        }
    }

No HTML:

<div infinite-scroll='JsonNews()' inite-scroll-distance='1'>
        <ion-item data-ng-repeat="item in posts | filter: query" class="item-thumbnail-left item-text-wrap item-icon-right" href="window.open('{{item.permalink}}', '_system', 'location=yes'">
                    <img class="thumb-noticia" data-ng-src="{{item.thumbnail}}">
                    <h2> {{item.title}} </h2>
                    <p>{{item.excerpt | limitTo: 100}}...</p>
         </ion-item>
</div>

html angularjs json

asked by anonymous 02.07.2015 / 22:42

1 answer

Brazilian Army Scheduling System Download FTP using C #

score 2 · Answer 1

I do not use any plugin to do infinit scroll with angular, in my case.

Html Example.

<div data-ng-repeat="item in lista" data-infinit-scroll-page="loadInfinit()"> // nessa div eu coloco p/ dar barra de rolagem
   <input type="text" data-ng-model="item.nome">
</div>

Controller example.

controller('textController', ['$scope', '$http' function($scope, $http){

    $scope.lista = []; //Aqui você inicializa sua lista vazia.
    $scope.pag = 0;

    $scope.loadInfinit = function(){

    $http.get('url + $scope.pag').success(function(retorno){

         $scope.pag += 1; //incremento +1 na minha pagina
         angular.forEach(retorno, function(value, index){
              $scope.lista.push(value)
         });    
    });    

   }

   $scope.loadInfinit(); // depois da criação do controller, já mando ler a 1ª vez os registros.

}]);


app.directive('infinitScrollPage', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            var elm = $(document);
            elm.bind('scroll', function () {
                var porcentagem = (($(window).scrollTop() + $(window).height()) / $(this).height()).toFixed(2);
                if (porcentagem >= 0.95) { //só aplica o scroll se for maior igual a 95%
                    scope.$apply(attr.infinitScrollPage);
                }
            });
        }
    };
});