1

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 después de haber realizado lo ya mencionado, aparecen todos los artículos al mismo tiempo, de golpe, es como si el ngInfiniteScroll dejara de funcionar.

2-en el infinite-scroll-distance='0' tengo que colocar 0 obligatoriamente porque 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>

2
  • ¿En dónde estás realizando la búsqueda? Es decir, ¿qué elemento DOM utilizas? Commented el 5 jul. 2016 a las 15:18
  • @CésarGómez Cómo puedes ver en el código HTML tengo un ng-repeat con un filtro llamado search as results y un input con un ng-model="search.title", ahí es donde realizo la búsqueda para filtrar los elementos del ng-repeat. En el código JavaScript del Controller del ngInfiniteScroll tengo qué inicialmente solo aparezcan 18 items y al realizar scroll hasta el bottom va cargando los demás items. Commented el 5 jul. 2016 a las 18:43

1 respuesta 1

1

Existe una propiedad del ngInfiniteScroll llamada "infinite-scroll-disabled" que, según la documentación (https://sroze.github.io/ngInfiniteScroll/documentation.html) permite desactivar el infinite-scroll según una condición dada.

Por ejemplo, puedes deshabilitar la carga autom. de elementos mientras se está ejecutando la búsqueda (o sea, el filtro).

1
  • Gracias por responder. ¿Por favor podrías darme un ejemplo de cómo hacerlo, no tengo mucha experiencia en AngularJS? Commented el 20 jul. 2016 a las 16:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.