Angularjs - 加载$ http响应项目一次少于5个

Question

I'm working on a product catalog application using Ionic Framework, with php to retrieve product from database and ajax to load it in frontend, every thing is working great, but when i try to filter by category the response return a json with more then 1xxx items inside and that would hurt the user experience.

Code ->

Controllers->

    $scope.$on('$stateChangeSuccess', function() {
    $scope.loadMore();  //Added Infine Scroll
});

// Loadmore() called inorder to load the list 
$scope.loadMore = function() {

    str=sharedFilterService.getUrl();
    $http.get(str).success(function (response){
        window.localStorage.setItem( 'app-name', JSON.stringify(response));
        var appData = JSON.parse( window.localStorage.getItem( 'app-name' ));
        $scope.menu_items = appData;
        $scope.hasmore=response.has_more;   //"has_more": 0 or number of items left
        $scope.$broadcast('scroll.infiniteScrollComplete');
    }); 

};

services ->

 .factory('sharedFilterService', [function(){

var obj = {};
obj.str = "http://pathtoscript.php";



obj.getUrl=function(){

    obj.str="http://pathtoscript.php"; // pass the value to url
    console.log("URL",obj.str);
    return obj.str;
};
return obj;
}])

ionic html

 <ion-list ng-repeat="item in menu_items">
        <ion-item class="item-thumbnail-left" >
        <ion-slide-box auto-play ="true" does-continue="true" show-pager="false"  > 
               <ion-slide ng-repeat="image in item.image">
                            <img  ng-src="{{image.url}}"  ng-click="showProductInfo(item.p_id,item.p_description,image.url,item.p_name,item.p_price)" >
                </ion-slide >
        </ion-slide-box>
            <p style="position:absolute;right:10px;">
            <a  ng-click="addToCart(item.p_id,item.p_image_id,item.p_name,item.p_price)" class="button  button-balanced button-clear   icon ion-android-cart">  </a> 
            </p>

            <h2  ng-click="showProductInfo(item.p_id,item.p_description,item.p_image_id,item.p_name,item.p_price)" > {{item.p_name}} </h2>
            <p   ng-click="showProductInfo(item.p_id,item.p_description,item.p_image_id,item.p_name,item.p_price)">Price: {{item.p_price}}</p>
        </ion-item>

    </ion-list>

My Question is can i load only a number of item from the php script, and continue from last position when needed.

Answer 1

I found a solution, after @Vohidjon suggestion i have modified my back end code using GET["till"] the number of item to load

This is my new controller

    $scope.loadMore = function() {

        str=sharedFilterService.getUrl();
        $http.get(str).success(function (response){
        $scope.menu_items = response;
        }); 
};
$scope.loadMoreleft = function() {
        sharedFilterService.till+=3;
        str=sharedFilterService.getUrl();
        $http.get(str).success(function (response){
        $scope.menu_items = response;
        });
};
$scope.loadMoreright = function() {
        sharedFilterService.till-=3;
        str=sharedFilterService.getUrl();
        $http.get(str).success(function (response){
        $scope.menu_items = response;
        }); 
};

And the services

    obj.getUrl=function(){

    obj.till=obj.till;
    obj.str="http://pathtoscript.php?till="+obj.till; // pass the value to url -- ?till="+obj.till

    if(obj.sort!="" && obj.category!=""){
        obj.str= obj.str+"&category="+obj.category+"&sort="+obj.sort;
    }
    else if(obj.category!="" ){
        obj.str= obj.str+"&category="+obj.category;
    }
    else if(obj.sort!=""){  
        obj.str= obj.str+"&sort="+obj.sort;
    }
    console.log("URL",obj.str);
    return obj.str;
};
return obj;

then i added to ahref tag to handle the click

        <div class="bottom-arrow">
        <div class="left"><a href="#"  ng-click='loadMoreleft()'>left</a></div>
        <div class="right"><a href="#"  ng-click='loadMoreright()'>right</a></div>
    </div>