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 apareciendo los artículos anteriores pero al realizar otra búsqueda luego de aver realizado el scroll y se haya ejecutado la función del ngInfiniteScroll al llegar al bottom, 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>