Lazy loading

ionic-v1
1

HI , this is my controller. i want to load 10 records per page, can any one guide how to do this.

.controller(‘DebtCtrl’, function($scope, $http, $ionicLoading,$timeout) {
var debturl=‘http://tmcs.no-ip.info:83/iAutoCount/Debtor.svc/json/DebtorSynchronization?dbName=5bvq9pq8EokHTf+uB/yLD61bh48juTfB/Up19EK4bks=&uDId=iKNColFa+oztAVriouDfvMpoNDwsYn9H4aJxSVWFIWpqyPnE1k47C5VUkpntIVPr&isFullSync=true&lastUpdate=1413788985&pageNo=1&perPage=1000’
$ionicLoading.show({ template: ‘Loading…’ })
$scope.doRefresh = function() {
// console.log(‘Refreshing!’);
$timeout( function() {
$http.get(debturl,{cache:true}).success(function(data) {
$scope.debtrow = data.DebtorSynchronizationResult;
})
//Stop the ion-refresher from spinning
$scope.$broadcast(‘scroll.refreshComplete’);
}, 1000);

};
$http.get(debturl,{cache:true}).success(function(data) {
$scope.debtrow = data.DebtorSynchronizationResult;
//console.log(‘withoutreferesh!’);
$ionicLoading.hide();

})
})

2

You could use Angular limitTo like this:

 <ion-item ng-repeat="item in debtrow | limitTo:10">

Otherwise you could also use ionic collectionRepeat, see the documentation on how to use. Is that what you are looking for?
If nothing of this helps you, please specify how you want to use it in your HTML!

3

HI Saimon,
this is my webservice.

http://tmcs.no-ip.info:83/iAutoCount/Debtor.svc/json/DebtorSynchronization?dbName=5bvq9pq8EokHTf+uB/yLD61bh48juTfB/Up19EK4bks=&uDId=iKNColFa+oztAVriouDfvMpoNDwsYn9H4aJxSVWFIWpqyPnE1k47C5VUkpntIVPr&isFullSync=true&lastUpdate=1413788985&pageNo=1&perPage=1000

in end perpage is passing i need to do this dynamic or i need a option to load all data from web service then show only 10 records ,then when user scroll down i willl load another 10 records like load more…

so need your help how to do this…

4

You can use infinite scrolling

http://ionicframework.com/docs/api/directive/ionInfiniteScroll/

5

Hi Cmaden,

i try this i stuck here…

$http.get(debturl).success(function(items) {
useItems(items);

how to use this useritems(items)
i m using this

$scope.debtrow = data.DebtorSynchronizationResult;

6

This is how i used it

 $scope.limit = 5
 $scope.loadMore = function() {
       if ( check array lenght){
            $scope.limit +=5;
      }
 };

I us this together with limit and add 5 to limit everything I get to the end

7

@cmaden

but how i use this

$scope.debtrow = data.DebtorSynchronizationResult;

8

is this return a JSON with all your objects ?

9

yes… it is json file…

var debturl=‘http://tmcs.no-ip.info:83/iAutoCount/Debtor.svc/json/DebtorSynchronization?dbName=5bvq9pq8EokHTf+uB/yLD61bh48juTfB/Up19EK4bks=&uDId=iKNColFa+oztAVriouDfvMpoNDwsYn9H4aJxSVWFIWpqyPnE1k47C5VUkpntIVPr&isFullSync=true&lastUpdate=1413788985&pageNo=1&perPage=1000’

$scope.items = ;
$scope.loadMore = function() {
$http.get(debturl).success(function(data) {
$scope.debtrow = data.DebtorSynchronizationResult;
$scope.$broadcast(‘scroll.infiniteScrollComplete’);
});
};

$scope.$on(‘$stateChangeSuccess’, function() {
$scope.loadMore();
});

10

You can do

var debtrow = data.DebtorSynchronizationResult;

$scope.items.push(debtrow);

But since your have per page limit of of 1000;
There is not point having this in your loadMore function

You can set your $scope,items = data.DebtorSynchronizationResult; outside your loadmore function and change the limit of your ng-repeat when you want to loadmore

Unless i am getting your question wrong.

If you are reading your object in smaller limits then you can use array push to push more items in your scope.

11

i understand now, so how i do pagination from webservice. what i think if i will store 1000 data then when i show it will load only 10 records on load more another 10 will show…

how i will do this…

12

I think if you change this part of the code in your url

pageNo=1&perPage=1000'

perPage= set this to how many items u wane fetch
and if you wane fetch more items navigate to the next page by changing pageNo=1,2,3,4 etc

13

Hi, you are right, but how i will do dynamic this if i change perPage=10 then 10 records showing.

what is my logic all data i store in a variable and when i load more it will add 10 records …

or what is good to do pls suggest me

14

An example would be to have a var for your page number like below and increment that page number every time you want go next page and fetch more

var page = 1;
var debturl='http://tmcs.no-ip.info:83/iAutoCount/Debtor.svc/json/DebtorSynchronization? dbName=5bvq9pq8EokHTf+uB/yLD61bh48juTfB/Up19EK4bks=&uDId=iKNColFa+oztAVriouDfvMpoNDwsYn9H4aJxSVWFIWpqyPnE1k47C5VUkpntIVPr&isFullSync=true&lastUpdate=1413788985&pageNo=page&perPage=1000'

have a fucntion that increments your page number