Angularjs

Question

我正在使用 Ionic Framework 开发产品目录应用程序，使用 php 从 database 和 ajax 在前端加载它，一切都很好，但是当我尝试按类别过滤时 response return 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

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

要回答您的问题，您可以使用 angular 的 limitTo 过滤器最初显示 10 个项目，然后使用 "Show more" 按钮增加限制

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

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

... but when i try to filter by category the response return a json with more then 1xxx items inside

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

Answer 2

我找到了解决方案，根据@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>

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

Angularjs - Loading $http response item Less than 5 at a time

php

json

angularjs-http

ionic-framework