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

Question

我正在使用 Ionic Framework 开发产品目录应用程序，并使用 php 从 database 和 ajax 在前端加载它，一切都很好，但是当我尝试按类别过滤时，response 返回一个json，里面有超过 1xxx 个项目，这会损害 用户体验强>。

代码->

控制器->

    $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');
    }); 

};

服务->

 .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;
}])

离子 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>

我的问题是我可以从 php 脚本中仅加载一些项目，并在需要时从最后一个位置继续。

Answer 1

我找到了一个解决方案，在@Vohidjon 建议后，我使用GET["till"] 要加载的项目数修改了我的后端代码

这是我的新控制器

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

还有服务

    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;

然后我添加到ahref标签来处理点击

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

Answer 2

首先，在 stackoverflow 或任何其他公共站点上公开您的 API url 不是一个好主意。所以我建议用虚拟 url (https:domain.com/my/api) 替换它们

要回答您的问题，您可以使用 Angular 的 limitTo 过滤器最初显示 10 个项目，然后使用“显示更多”按钮增加限制

<ion-list ng-repeat="item in menu_items | limitTo : myLimit">
    ...
</ion-list>
<button ng-click="myLimit = myLimit + 10"></button>

请注意，您最初会加载所有数据。

...但是当我尝试按类别过滤时，响应返回一个 json 里面有超过 1xxx 个项目

这意味着您在后端遇到了一些问题。修复它并尝试上面的解决方案。