CODEWITHSUNDEEP
javascripthtmlangularjs
ch3t
ch3t

Reputation: 486

removing top records from ng-repeat and append again based on scroll position

I have an ng-repeat which loads large amount data. I'm using limitto filter to load more records which appends 10 records each time when we scroll to bottom of the page. How to remove top 10 records whenever new 10 records are added. Any quick solution will be appreciated.

 <ul class="lists">
    <li ng-repeat="item in items | limitTo:totalDisplayed">
     <span>{{item.name}}</span>
    </li>
     <li>
     <button ng-click='loadMore()'>Load More</button>
     </li>

</ul>


    $rootScope.totalDisplayed = 5;
    $rootScope.load_more = function () {
        $rootScope.totalDisplayed += 10;
    };

Upvotes: 0

Views: 95

Answers (2)

Raghav
Raghav

Reputation: 1229

Try this:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
	
    $scope.initial = 0;
    var limitStep = 10;
    $scope.limit = limitStep;
    $scope.incrementLimit = function() {
    	$scope.initial = $scope.limit;
        $scope.limit += limitStep;
    };
   
    $scope.decrementLimit = function(){
	    $scope.limit -= limitStep;
        $scope.initial -= 10;
};
   
    $scope.items = [{'name':'abc'},{'name':'abc'},{'name':'abc'},{'name':'abc'},{'name':'abc'},{'name':'abc'},{'name':'abc'},{'name':'abc'},{'name':'abc'},{'name':'abc'},{'name':'abc'},{'name':'bcd'},{'name':'bcd'},{'name':'bcd'},{'name':'bcd'},{'name':'bcd'},{'name':'bcd'},{'name':'bcd'},{'name':'bcd'},{'name':'bcd'},{'name':'cde'},{'name':'cde'},{'name':'cde'},{'name':'cde'},{'name':'cde'},{'name':'cde'},{'name':'cde'},{'name':'cde'},{'name':'cde'},{'name':'cde'},{'name':'cde'}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<ul class="lists">
    <li ng-repeat="item in items | limitTo: limit track by $index" ng-if="$index < limit && $index > initial">
     <span>{{item.name}}</span>
    </li>
</ul>	
<button ng-click='decrementLimit()' ng-disabled="initial===0">Load Previous</button>
<button ng-click='incrementLimit()' ng-disabled="limit===items.length-1">Load Next</button>        
</div>

Hope it helps..

Upvotes: 1

asdf_enel_hak
asdf_enel_hak

Reputation: 7640

One of the feasible way is ng-if:

<li ng-repeat="item in items | limitTo:totalDisplayed">
  <span ng-if="yourConditions()">{{item.name}}</span>
</li>

$rootScope.yourCondition = function(){
   //calculate if it is "skipped"
}

Upvotes: 0

Related Questions