how to join two table in codeigniter easily[updated] | ci_model | ci_controller | codeigniter 3 -datainflow
In this post I will discuss the idea of infinite scrolling which is loading in new items (basically older items) to the bottom of a list as the user scrolls in Ionic app . So just follow me .
Directive
I have used ion-infinite-scroll directive . For this directive you have to use this code which is given in the bellow .
<ion-infinite-scroll on-infinite="loadMore()" distance="1%"> </ion-infinite-scroll>
My View
Here is a view code where I have added this directive in the under portion .
<ion-view view-title="...." name="...." class="...."> <ion-content class="padding"> <div ng-repeat="result in results"> <div class="list card"> <div class="item item-avatar"> <img src="....your link/{{result.something}}"> <h2 style="margin-top:11px;margin-left:20%;">{{result.something}}</h2> <p style="margin-left:20%;">{{ result.something | date }}</p> </div> <div class="item item-body" style="padding: 15px;"> <img class="full-image" src="....your link/{{result.something}}"> <h2 class="title">{{result.something}}</h2> <div ng-bind-html="result.something"></div> <div class="row"> <div class="col-20"><a style="margin-left:-7px" href="#" class="subdued">{{result.something}} <span class="ion-trophy"></span></a></div> <div class="col-40" style="text-align:center"><a href="#" class="subdued">{{result.something}} <span class="ion-chatboxes"></span></a></div> <div class="col-40"><a style="cursor: pointer;text-align:right" class="button-block button-calm" ng-click="view(result.something)">View <span class="ion-eye"></span></a></div> </div> </div> </div> </div> <ion-infinite-scroll on-infinite="loadMore()" distance="1%"> </ion-infinite-scroll> </ion-content> </ion-view>
My Controller
My controller code is in the bellow .
angular.module('starter').controller('....',function($scope,$state,$ionicPlatform,$http,$localstorage,ionicToast,ConnectivityMonitor){ $scope.results = []; $scope.noDatafound = false; var pageNo = 0; var u_id = $localstorage.get("...."); $scope.view = function(id){ $state.go('....',{'recipe_id':id}); } $scope.loadMore = function() { if(ConnectivityMonitor.isOnline()){ if(!$scope.noDatafound){ if(!$scope.inProgress){ $scope.inProgress = true; var link = site_url+'....?page_no='+pageNo+'&u_id='+u_id; $http.get(link).success(function(res){ if(res.length>0){ $scope.results = $scope.results.concat(res); pageNo = res[0].page_no; } else{ $scope.noDatafound = true; } }).finally(function(){ $scope.inProgress = false; $scope.$broadcast('scroll.infiniteScrollComplete'); }); } } else{ $scope.$broadcast('scroll.infiniteScrollComplete'); ionicToast.show('No more data available', 'middle', false, 2500); } } else{ ionicToast.show('No network connection', 'middle', false, 2500); } } })
Note
Don’t forget to add the finally( ) into your feedback success( ) . Otherwise loadmore( ) will be called more than one time in a certain period . Then a data redundancy will occur . If you use finally( ) then it prevent from this error .
If any doubts please put a comment in the bellow .
Related posts