javascript - ng-repeat not updating after search -
i've got ionic app in development, , i'm having unusual error occur. have main "jobs" template current user see of jobs have been assigned them:
<ion-view cache-view="false" ng-controller="jobsctrl"> <ion-content> <ion-list> <ion-item ng-repeat="job in jobs" class="item-icon-right item-text-wrap"> <a href="#" style="text-decoration:none; color: #444;" ng-click="loadjob(job.jobid)"> {{job.jobid}} - {{job.surname}} - {{job.suburb}} - {{job.jobtype}}<i class="icon ion-chevron-right icon-accessory"></i> </a> </ion-item> </ion-list> </ion-content> </ion-view>
this view populated, so:
$http.get(apiendpoint.url + '/getjobs').then(function (resp) { $scope.jobs = resp.data; $ionicloading.hide(); }, function (err) { //console.error('err', err); // err.status contain status code });
there search box @ top of template, when fired, gets new list of jobs search string parameter:
var searchtext = $scope.data.searchtext; $ionicloading.show({ template: '<p>searching...</p><ion-spinner></ion-spinner>' }); $http.get(apiendpoint.url + '/getjobs/' + encodeuricomponent(searchtext)).then(function (resp) { $timeout(function () { $scope.jobs = resp.data; }); $ionicloading.hide(); }, function (err) { $ionicloading.hide(); //console.error('err', err); // err.status contain status code });
what happening though, ion-list not updating when $scope.jobs assigned new data. know fact successful (via packet sniffer). i've done lot of searching around answer (hence $timeout call) - i've tried applying $scope.$apply(); directly after $scope.jobs = resp.data; sites have suggested, without luck. ideas on how can reload ng-repeat properly?
try variation, might suggest not using $scope reference. include $scope reference, use 'this' instead of $scope. update code when search input area included if needed.
example controller:
function examplectrl ($scope) { var vm = this; //i think should formatted differently. var searchtext = $scope.data.searchtext; //maybe this. vm.data = {}; //then vm.data.searchtext included view model. make sure include on html so, jobs.data.searchtext $ionicloading.show({ template: '<p>searching...</p><ion-spinner></ion-spinner>' }); $http.get(apiendpoint.url + '/getjobs/' + encodeuricomponent(searchtext)).then(function (resp) { $timeout(function () { vm.jobs = resp.data; }); $ionicloading.hide(); }, function (err) { $ionicloading.hide(); //console.error('err', err); // err.status contain status code }); examplectrl.$inject = ['$scope']; angular .module('example') .controller('examplectrl', examplectrl); <ion-view cache-view="false" ng-controller="jobsctrl jobs"> <ion-content> <ion-list> <ion-item ng-repeat="job in jobs.jobs" class="item-icon-right item-text-wrap"> <a href="#" style="text-decoration:none; color: #444;" ng-click="loadjob(job.jobid)"> {{job.jobid}} - {{job.surname}} - {{job.suburb}} - {{job.jobtype}}<i class="icon ion-chevron-right icon-accessory"></i> </a> </ion-item> </ion-list> </ion-content> </ion-view>
update search input:
<ion-header-bar style="background-color: transparent; " class="item-input-inset"> <form ng-submit="jobs.submitsearch()"> <label class="item-input-wrapper"> <i class="icon ion-search placeholder-icon"></i> <input type="search" placeholder="search" ng-model="jobs.data.searchtext"> </label> </form>
Comments
Post a Comment