ionic infinite list scroll with json url

Question

how to make ionic list with json url

json code:

[{"id":"1","firstName":"John", "lastName":"Doe"},
{"id":"2","firstName":"Anna", "lastName":"Smith"},
{"id":"3","firstName":"Peter", "lastName":"Jones"},{......................}]

app.js

$http.get("http://localhost/app/users.php")
.success(function (response) 
{
$scope.items = response;
});

template

<ion-list>
    <ion-item ng-repeat="x in items">
      First name: {{x.firstName}}
      Last name: {{x.lastName}}
    </ion-item>
</ion-list>

now i want to add ion-infinite-scroll

this is my first app.

Answer 1

html

<ion-content ng-controller="MyController">
   <ion-list>
   ....
    ....
   </ion-list>

  <ion-infinite-scroll
      on-infinite="loadMore()"
      distance="1%">
    </ion-infinite-scroll>
  </ion-content>

js

 function MyController($scope, $http) {
   $scope.items = [];
   $scope.loadMore = function() {
     $http.get('/more-items').success(function(items) {
       useItems(items);
       $scope.$broadcast('scroll.infiniteScrollComplete');
     });
   };

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

An easy to way to stop infinite scroll once there is no more data to load is to use angular's ng-if directive:

html

  <ion-infinite-scroll
   ng-if="moreDataCanBeLoaded()"
    icon="ion-loading-c"
    on-infinite="loadMoreData()">
  </ion-infinite-scroll>

IonicModule

.directive('ionInfiniteScroll', ['$timeout', function($timeout) {
  return {
    restrict: 'E',
    require: ['?^$ionicScroll', 'ionInfiniteScroll'],
    template: function($element, $attrs) {
      if ($attrs.icon) return '<i class="icon {{icon()}} icon-refreshing {{scrollingType}}"></i>';
      return '<ion-spinner icon="{{spinner()}}"></ion-spinner>';
    },
    scope: true,
    controller: '$ionInfiniteScroll',
    link: function($scope, $element, $attrs, ctrls) {
      var infiniteScrollCtrl = ctrls[1];
      var scrollCtrl = infiniteScrollCtrl.scrollCtrl = ctrls[0];
      var jsScrolling = infiniteScrollCtrl.jsScrolling = !scrollCtrl.isNative();

      // if this view is not beneath a scrollCtrl, it can't be injected, proceed w/ native scrolling
      if (jsScrolling) {
        infiniteScrollCtrl.scrollView = scrollCtrl.scrollView;
        $scope.scrollingType = 'js-scrolling';
        //bind to JS scroll events
        scrollCtrl.$element.on('scroll', infiniteScrollCtrl.checkBounds);
      } else {
        // grabbing the scrollable element, to determine dimensions, and current scroll pos
        var scrollEl = ionic.DomUtil.getParentOrSelfWithClass($element[0].parentNode, 'overflow-scroll');
        infiniteScrollCtrl.scrollEl = scrollEl;
        // if there's no scroll controller, and no overflow scroll div, infinite scroll wont work
        if (!scrollEl) {
          throw 'Infinite scroll must be used inside a scrollable div';
        }
        //bind to native scroll events
        infiniteScrollCtrl.scrollEl.addEventListener('scroll', infiniteScrollCtrl.checkBounds);
      }

      // Optionally check bounds on start after scrollView is fully rendered
      var doImmediateCheck = isDefined($attrs.immediateCheck) ? $scope.$eval($attrs.immediateCheck) : true;
      if (doImmediateCheck) {
        $timeout(function() { infiniteScrollCtrl.checkBounds(); });
      }
    }
  };
}]);

Answer 2

Create a list.json file in www floder

html

<ion-content class="padding">
    <ion-list>
        <ion-item collection-repeat="list in _list" class="item-thumbnail-left">
            <p>{{list.id}}</p>
            <p>{{list.firstName}}</p>
            <p>{{list.lastName}}</p>
        </ion-item>
    </ion-list>
    <ion-infinite-scroll ng-if="canWeLoadMoreContent()" on-infinite="populateList()" distance="1%">
    </ion-infinite-scroll>
</ion-content>

controller

 .controller('listCtrl', function($scope, $http) {

     $scope._list = [];
     var from = 1;
     $scope.populateList = function() {
         populateLists();
     }
     $scope.canWeLoadMoreContent = function() {
         return ($scope._list.length > 49) ? false : true;
     }
     populateLists();

     function populateLists() {
         $http.get('list.json').success(function(data) {
             $scope.list = data;
             var limit = from + 9;
             for (var i = from; i <= limit; i++) {
                 console.log($scope.list[i]);
                 $scope._list.push({
                     id: $scope.list[i].id,
                     firstName: $scope.list[i].firstName,
                     lastName: $scope.list[i].lastName

                 });
                 from = i;
             }
             $scope.$broadcast('scroll.infiniteScrollComplete');
         });
     }
 });

list.json

[{
    "id": "1",
    "firstName": "John",
    "lastName": "Doe"
}, {
    "id": "2",
    "firstName": "Anna",
    "lastName": "Smith"
}, {
    "id": "3",
    "firstName": "Joy",
    "lastName": "Jones"
}, {
    "id": "4",
    "firstName": "Sal",
    "lastName": "Jsdones"
}, {
    "id": "5",
    "firstName": "Pedfdter",
    "lastName": "sdfs"
}, {
    "id": "6",
    "firstName": "sfsfs",
    "lastName": "gjng"
}, {
    "id": "7",
    "firstName": "fgfg",
    "lastName": "dfgg"
}, {
    "id": "8",
    "firstName": "fdfgde",
    "lastName": "erwrw"
}, {
    "id": "9",
    "firstName": "fsc",
    "lastName": "cscfsd"
}, {
    "id": "10",
    "firstName": "sdsd",
    "lastName": "sfsf"
}, {
    "id": "11",
    "firstName": "hjkyh",
    "lastName": "dsd"
}, {
    "id": "12",
    "firstName": "sdsd",
    "lastName": "Jones"
}, {
    "id": "13",
    "firstName": "ssdcsw",
    "lastName": "szdsd"
}, {
    "id": "14",
    "firstName": "sdsd",
    "lastName": "eqwe"
}, {
    "id": "15",
    "firstName": "Peter",
    "lastName": "Jones"
}, {
    "id": "16",
    "firstName": "sfsd",
    "lastName": "Jones"
}, {
    "id": "17",
    "firstName": "sdsdws",
    "lastName": "kyhk"
}, {
    "id": "18",
    "firstName": "jtj",
    "lastName": "fhrfhrt"
}, {
    "id": "19",
    "firstName": "fgryhrt",
    "lastName": "fhrtyh"
}, {
    "id": "20",
    "firstName": "fgrfg",
    "lastName": "fgrfg"
}, {
    "id": "21",
    "firstName": "fgrfgr",
    "lastName": "fgrr"
}, {
    "id": "22",
    "firstName": "qwqw",
    "lastName": "gnbgbn"
}]