ng重复搜索后不更新

ng-repeat not updating after search

本文关键字：更新 搜索 ng      更新时间：2023-09-26

我有一个Ionic应用程序正在开发中，我遇到了一个不寻常的错误。我有一个主要的"作业"模板，当前用户将看到分配给他们的所有作业：

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

此视图已填充，如下所示：

$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
});

模板顶部有一个搜索框，当它被激发时，只需获取一个以搜索字符串为参数的新作业列表：

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
});

然而，当$scope.jobs被分配新数据时，离子列表没有更新。我知道GET是成功的（通过数据包嗅探器）。我已经做了很多搜索来寻找答案（因此产生了$timeout调用）——我还尝试过应用$scope$apply（）；直接在$scope.jobs=resp.data；之后；正如一些网站所暗示的那样，运气不佳。关于如何让它正确地重新加载ng重复，有什么想法吗？

试试这个变体，我是否也建议不要使用$scope引用。包括$scope引用，但使用"this"而不是$scope。如果需要，将在包含搜索输入区域时更新代码。

示例控制器：

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>

搜索输入更新：

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

相关文章：