0

What is happening is that when I reach the bottom of the page, it refreshes and loads the new data, however it doesn't show the data for the previous and current page.

For example it looks like this: 

1
2
3
4
* end of page, refreshes page* 
5
6
7
8

My function in my controller:

var i = 0;
$scope.result = [];    
$scope.noMoreItemsAvailable = false;

$scope.loadMore = function() {

 if (i < 4) {
   $http.get(url.recommended + i).success(function(response) {
     i++;
     $scope.result = $scope.result.push(response);
     console.log(response);

     $timeout(function() {
       $scope.result = response
     });

     $scope.$broadcast('scroll.infiniteScrollComplete');
   });
 } else {
   $scope.noMoreItemsAvailable = true;
 }
}

HTML:

<div class="item item-text-wrap" ng-click="post($event,res)" ng-repeat="res in result" ng-controller="recommendedJobsCtrl" ui-sref="tabs.jobDetails">
  <ul>    
    <li id="jobTitle">{{res.title }}</li>
  </ul>
</div>

<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
developer033
  • 20,983
  • 7
  • 64
  • 95
noor
  • 491
  • 6
  • 18
  • First, you should use or `interpolation` or `ngBind` directive, not both like this: `ng-bind="postJob">{{res.title }}`. – developer033 Aug 03 '16 at 04:20
  • @developer033 sorry that related to something else. I updated the question. – noor Aug 03 '16 at 04:34
  • I think you have to rethink your way to retrieve these items... you're performing 4 `$http` requests everytime, why? Why not only one limiting to 4 your items in `back-end`? Also, you should have a `factory` to do this kind of things.. – developer033 Aug 03 '16 at 05:08
  • @developer033 the api that I was given to use needs to be looped through, the "i" represents the number of pages. So how would you suggest I retrieve the information ? – noor Aug 03 '16 at 07:20
  • I suggest you to change your `API`... you can do a single *query* in your database retrieving four items, instead of 1 by one. So, you can treat those items in your `Angular` **controller**. – developer033 Aug 04 '16 at 01:22
  • You should push results on lazy load rather then assigning it. it will reload if you assign. i would suggest you should push data to existing array so it won't reload. – Hardik Vaghani Aug 04 '16 at 06:35

2 Answers2

1

Well, there are 2 main problems:

  1. You're attributing the value of the push for your array. You shouldn't do this, you just have to do this:
$scope.result.push(response);
  1. You should remove this timeout because it's overriding what you already have:
$timeout(function() {
  $scope.result = response
});

By the way, I'd recommend you to create a factory to prevent problems with async data.

You could do something like this:

angular
  .module('app', [])
  .controller("MainCtrl", MainCtrl)
  .factory("ItemsFactory", ItemsFactory);

ItemsFactory.$inject = ['$http'];

function ItemsFactory($http) {
  var factory = {
    getPages: getPages
  };

  return factory;

  function getPages(url) {
    return $http.get(url);
  }
}

Then, in your controller:

MainCtrl.$inject = ['$scope', 'ItemsFactory'];

function MainCtrl($scope, ItemsFactory) {
  var url = 'https://www.google.com';     

  function getResponse(response) {
    $scope.result.push(response.data);
  }

  function getError(response) {
    console.log(response);
  }

  ItemsFactory.getPages(url)
    .then(getResponse);
    .catch(getError);
}

Please, note: I also recommend you to change the way that you're retrieving your items from your back-end. It isn't a good way to retrieve the elements 1 by 1. The correct in your case is to retrieve all the four items at once and treat them in controller.

developer033
  • 20,983
  • 7
  • 64
  • 95
0

Your timeout is causing the $scope.result to be overwritten by the response. Just remove this and it should append the response to the result

REMOVE THIS

    $timeout(function () 
      {
      $scope.result=response 
      });
Srijith
  • 1,424
  • 8
  • 14