Question

我有一个正在开发的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-repeat的任何想法？

Answer 1

尝试此变体，我可能还建议不要使用$ scope引用。包括$ scope引用，但使用＆＃39; this＆＃39;而不是$ 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>

搜索后ng-repeat不更新

1 个答案: