Skip to main content
3 de 4
se eliminaron 68 caracteres en el cuerpo

¿Cómo implementar correctamente ngInfiniteScroll?

Este es mi código, todo funciona correctamente pero tengo 2 errores, por favor espero que puedan ayudarme.

1-Al realizar una búsqueda en el input los artículos se filtran correctamente y al hacer scroll y llegar al bottom se ejecuta la función de ngInfiniteScroll y van cargando los artículos anteriores pero al realizar otra búsqueda luego de aver realizado lo ya mencionado, aparecen todos los artículos al mismo tiempo de golpe, es cómo si el ngInfiniteScroll dejara de funcionar.

2-en el infinite-scroll-distance='0' tengo que colocar 0 obligatoriamente por qué si pongo 1, 2 o 3 por ejemplo la función se activa al hacer scroll instantáneamente y no al llegar al bottom.

.controller('newsCtrl', ['$scope','$rootScope','DataSource', function($scope,$rootScope,DataSource){
    DataSource.get('/json/news.json', function(data){
      $scope.itemData = data.slice(0,18);
      $scope.itemsData = data;
      $scope.selected = data[0];
    });
    $scope.loadMore = function(){
      if($scope.itemData === undefined || $scope.itemsData === undefined){
        return;
      }
      var last = $scope.itemData.length-1;
      for(var i=1; i<=18; i++){
        if($scope.itemData.length >= $scope.itemsData.length){
          break;
        }
        $scope.itemData.push($scope.itemsData[last+i]);
      }
    };
  }]).factory('DataSource', ['$http', function($http){
    return{
      get: function(fileName,callback){
        $http.get(fileName).then(function(response){
          callback(response.data);
        },function(){
          console.log('error');
        });
      }
    };
  }]);
<section id="cd-team" class="cd-section"
  infinite-scroll='loadMore()'
  infinite-scroll-distance='0'>

  <div class="cd-container">

    <form autocomplete="off" accept-charset="UTF-8">
      <input type="search" id="search" maxlength=26 placeholder="Buscar noticias..."
      ng-model="search.title" ng-model-options="{updateOn : 'search'}">
    </form>

    <ul>

      <li ng-repeat="item in itemData | orderBy:'-order' | limitTo:816 | filter:search as results">
        <a ng-href="/news/{{item.id}}">
          <figure>
            <img ng-src="{{item.imageUrl}}">
            <figcaption am-time-ago="item.date | amParse:'DD/MM/YYYY h:mm:ss a'"></figcaption>
          </figure>
          <div class="cd-news-info">{{item.title}}<span>{{item.info}}</span></div>
        </a>
      </li>

      <span ng-if="results.length==0">No hay resultados...</span>

    </ul>

  </div>
</section>