Please help .. ionic infinite scroll

ionic-v1
1

Hi,
this is the first time i use ionic framework

i try to use ionic infinite scroll but i cant please any body can help me

this is my code

<ion-view view-title="Bank">
    <div class="bar bar-subheader 
  item-input-inset bar-light">
        <label class="item-input-wrapper">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="search" ng-model="query" placeholder="search">
        </label>
    </div>
    <ion-content ng-controller="BanksController" class="has-subheader">
        <div class="list2">
            <div collection-repeat='item in banks | filter: query' class="item item-icon-left right listdalil">
               <a href="tel:{{item.CallNumber}}">
                   <i class="icon">
        <button class="button button-assertive">
      <i class="icon ion-ios-telephone"></i>
                </button>
                </i> </a>
                {{item.Name}}
                <h4>{{item.ShowNumber}}</h4>
                <p>{{item.Adress}}</p>
            </div>
        </div>
  <ion-infinite-scroll
    on-infinite="loadMore()"
    distance="1%">
  </ion-infinite-scroll>
    </ion-content>
</ion-view>

    .controller('BanksController', ['$scope', '$http', '$state', function ($scope, $http, $state) {
                   $http.get("data/services/banks.json")
            .success(function (response) {
                $scope.banks = response;
            })

}])

thanks,

2

Hi,

Where is your loadMore method in the controller?

3

i cant add loadMore method in the controller

Pleas can you add full code ?

thanks

4

any body can help me

5

In Ionic your controller load when your app start. If you want to do something every time when user go to state in which you use your controller you need listed $ionicView.enter event.
But in your case you need to call some code every time when user scroll your page to bottom. As I see in your code you use ion-infinite-scroll directive. It call method loadMore() every time when the distance between bottom of your content and bottom of the page is smaller then 1%. So you need add the definition of loadMore() method in your controller. And don’t forget to stop your spinner animation by broadcast scroll.infiniteScrollComplete.

For example:


$scope.loadMore = function () {
 $http.get("data/services/banks.json")
            .success(function (response) {
                $scope.banks = response;
                $scope.$broadcast ('scroll.infiniteScrollComplete'); // need to stop spinner
            });
}

But every time when loadMore() function will calls your banks array will overwritten by data from your json. If you want add new items and don’t overwrite your current array you need write something like this in our controller:


$scope.banks = [];

$scope.loadMore = function () {
 $http.get("data/services/banks.json")
            .success(function (response) {
                $scope.banks = $scope.banks.concat(response);
                $scope.$broadcast ('scroll.infiniteScrollComplete'); 
            });
}
6

thank you very much
i add second code but when i scroll down data will load again double
what can do ?

7

Your service has to have some way of loading only the next # of items. So you would need an offset and limit.

	var offset = 0,
		limit = 20;

	$scope.requests = [];
	$scope.moreCanBeLoaded = false;

	$scope.loadMoreRequests = function () {
		offset = $scope.requests.length;
		RequestData.getRequests(offset, limit).then(function (data) {
			if (data.requests != '') {
				Array.prototype.push.apply($scope.requests, data.requests);
				$scope.$broadcast('scroll.infiniteScrollComplete');
			} else {
				$scope.moreCanBeLoaded = false;
				$scope.$broadcast('scroll.infiniteScrollComplete');
				if ($scope.requests.length === 0) {
					$scope.noRequests = true;
				}
			}

		}, function () {
			$scope.$broadcast('scroll.infiniteScrollComplete');
			$scope.moreCanBeLoaded = false;
		});

	};