Question

我正在使用 Ionic Framework 开发产品目录应用程序， php 从数据库和检索产品ajax 在前端加载它，每件事情都很好，但是当我尝试按类别过滤时，response会返回一个json，其中包含超过1xxx的项目，这会伤害用户体验。

代码 - ＆gt;

Controllers-＆GT;

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

};

服务 - ＆gt;

 .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网址并不是一个好主意。所以我建议用虚拟网址（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项目

这意味着你有一些后端的问题。修复它并尝试上面的解决方案。

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

2 个答案: