我有一个ng-repeat加载大量数据。我正在使用limitto筛选器加载更多记录,每次滚动到页面底部时,该记录都会追加10条记录。每当添加新的10条记录时如何删除前10条记录。任何快速的解决方案将不胜感激。

 <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;
    };

最佳答案

尝试这个:



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>





希望能帮助到你..

07-24 09:38
查看更多