@subhashp wrote:
Hello,
I have to show more than 2000 records, 100 records at a time. I am retrieving records using $http.get. I want to update "ion-list" so that the next or previous 100 records are retrieved and shown when user clicks "Previous Page" and "Next Page" links
I do not want to use infinite scroll as it will slowly load 2000+ records, 200 at a time and app may get slow.
Kindly help with solution.
--template--
<ion-view title="{{cPrompts.title}}"> <form name="appSearchForm" novalidate=""> <ion-header-bar class="bar bar-subheader item-input-inset"> <div class="item-input-wrapper"> <input id="searchKey" type="search" placeholder="{{cPrompts.placeholder}}" ng-model="search.App" autocorrect="off" name="searchApp" ng-minlength="4"> <button class="button button-clear" ng-click="clearSearch()">X</button> </div> <button class="button button-energized" ng-click="searchJ()">Search</button> </ion-header-bar> </form> <ion-content> <div class='item item-divider item-text-wrap' ng-show="cUpdates.length >= 1">Found {{cUpdates.length}} judgement(s) with '{{search.App}}' {{cPrompts.foundText}}</div> <div class='item item-divider item-text-wrap' ng-show="cUpdates.length == 0">No judgement(s) with '{{search.App}}' {{cPrompts.notFoundText}}</div> <div> <a class="button icon-left ion-chevron-left button-clear button-dark">Previous page</a> <a class="button icon-right ion-chevron-right button-clear button-dark">Next page</a> </div> <ion-list> <ion-item class="item-icon-right" style= "cursor:pointer" ng-repeat="cUpdate in cUpdates" ui-sref='app.message({cUpdateId: cUpdate.id})'> <div class="left-BorderY"> <h2>{{cUpdate.appelant}} <span style="color: grey;">vs</span><br>{{cUpdate.respondent}}</h2> </div> <i class="icon ion-chevron-right icon-accessory energized" style="color:#EF473A !important; font-size: 26px;"></i> </ion-item> </ion-list> </ion-content> </ion-view>
-- controller ----
.controller('cUpdatesCtrl', function($scope, $http,$state, $stateParams, $ionicLoading,cUpdatesService,sysConfig, uConfig, updateService, companyInfo) { $scope.search = { Typ: 'res', App: null, PageNo: 0, typ: sType, }; $scope.searchJ = function() { $ionicLoading.show({ template: 'Getting judgements ...<br><br><ion-spinner icon="android"></ion-spinner>', hideOnStageChange: true, duration: 60000, }); $scope.cUpdates = {}; updateService.getJudgements($scope.search.App,$scope.search.Typ,$scope.search.PageNo).then(function(cUpdates){ $scope.cUpdates = cUpdates[0].judDetails; cUpdatesService.setcUpdates($scope.cUpdates); $ionicLoading.hide(); }); }; $scope.clearSearch = function() { $scope.search.App = null; $scope.cUpdates = {}; }; }) .factory('updateService', function($http,sysConfig, uConfig) { var updates = []; return { getJudgements: function(s,typ,pageno){ return $http.get(sysConfig.apiUrl + "judgementsAPI.php", { params: { "s": s, "typ": typ, "pageno": pageno} }).then(function(response){ updates = response.data; return updates; }); }; }, }; })
Posts: 1
Participants: 1