ng-repeat nicht aktualisieren nach der Suche

Question

Ich habe eine Ionic-App in Entwicklung, und ich habe einen ungewöhnlichen Fehler auftreten. Ich habe eine Haupt „Jobs“ Vorlage, die der aktuelle Benutzer alle ihre Jobs sehen, die ihnen zugewiesen wurden:

<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> 

Diese Ansicht bevölkert ist, etwa so:

$http.get(ApiEndpoint.url + '/GetJobs').then(function (resp) { 
    $scope.jobs = resp.data; 
     $ionicLoading.hide(); 
}, function (err) { 
      //console.error('ERR', err); 
      // err.status will contain the status code 
}); 

Es gibt eine Suchfeld am oberen Rand der Vorlage, die, wenn sie abgefeuert, GETs einfach eine neue Liste der Aufträge mit einem Suchbegriff als 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 will contain the status code 
}); 

Was geschieht aber, dass die Ionen Liste wird nicht aktualisiert, wenn $ s cope.jobs erhält die neuen Daten. Ich weiß, dass das GET erfolgreich war (über einen Paket-Sniffer). Ich habe viel nach der Antwort gesucht (daher der $ Timeout-Aufruf) - ich habe auch versucht, $ scope anzuwenden. $ Apply(); direkt nach dem $ scope.jobs = resp.data; wie einige Seiten vorgeschlagen haben, ohne Glück. Irgendwelche Ideen, wie ich es bekommen kann, um die ng-Wiederholung richtig zu wiederholen?

Answer 1

Versuchen Sie diese Variation, könnte ich auch vorschlagen, nicht die $ Scope-Referenz zu verwenden. Schließen Sie die $ scope-Referenz ein, verwenden Sie jedoch 'this' anstelle von $ scope. Aktualisiert Code, wenn der Sucheingabebereich bei Bedarf enthalten ist.

Beispiel Controller:

function ExampleCtrl ($scope) { 

    var vm = this; 

    //I think this should formatted differently. 
    var searchText = $scope.data.SearchText; 
    //Maybe like this. 
    vm.data = {}; 
    //then vm.data.SearchText will be included from the view model. just make sure to include on html like 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 will contain the status code 
    }); 

ExampleCtrl.$inject = ['$scope']; 

angular 
    .module('example') 
    .controller('ExampleCtrl', ExampleCtrl); 


<ion-view cache-view="false" ng-controller="JobsCtrl as 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 für Sucheingabe:

<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>