Angularjs — загрузка элемента ответа $ http Менее 5 за раз

Question

Angularjs — загрузка элемента ответа $ http Менее 5 за раз

Я работаю над приложением каталога товаров, используя Ionic Framework, с PHP получить продукт из база данных а также Аякса чтобы загрузить его во внешнем интерфейсе, все работает отлично, но когда я пытаюсь отфильтровать по категориям, response вернуть json с более чем 1ххх предметов внутри и это повредит Пользовательский опыт.

Код ->

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

};

услуги ->

 .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 сценарий и продолжить с последней позиции, когда это необходимо.

1

angularjs angularjs-http ionic-framework json php

Решение

Другие решения

Прежде всего, не стоит выставлять ваши URL-адреса API на stackoverflow или любых других общедоступных сайтах. Поэтому я рекомендую заменить их фиктивными URL-адресами (https: domain.com/my/api)

Ответить на ваш вопрос, Вы можете использовать Angle’s LimitTo Filter для первоначального отображения 10 элементов и увеличения лимита с помощью кнопки «Показать больше»

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

Обратите внимание, что вы загружаете все данные изначально.

… но когда я пытаюсь отфильтровать по категориям, ответ возвращает JSON с
более 1ххх предметов внутри

Это означает, что у вас есть некоторые проблемы с бэкэндом. Исправьте это и попробуйте решение выше.

0

Источник

Accepted Answer

Я нашел решение, после предложения @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>

1