повторить не обновляя после поиска

Question

повторить не обновляя после поиска

0

У меня есть приложение Ionic в разработке, и у меня возникла необычная ошибка. У меня есть основной шаблон "jobs", который текущий пользователь увидит все свои задания, которые им были назначены:

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

Andrew Milici 20 апр. 2016, в 00:36

Источник

0

Возможно, вы могли бы использовать $ watch, а затем использовать функцию get там. Пусть обновит модель коллекции.
alphapilgrim 19 апр. 2016, в 22:26
0

Извините, если это глупый вопрос (все еще относительно новый для Angular / Ionic), но сработает ли это, если пользователь должен нажать кнопку «поиск»? Будут ли $ watch знать, когда стрелять?
Andrew Milici 19 апр. 2016, в 23:26
0

Можете ли вы вставить выходные данные resp.data ?
user1027620 19 апр. 2016, в 23:28
0

Конечно, вот начальные / GetJobs / [ { "JobId": "1717182", "Surname": "TEST SURNAME", "Suburb": "TEST SUBURB", "JobType": "Field Call" }, { "JobId": "1717374", "Surname": "TEST SURNAME", "Suburb": "TEST SUBURB", "JobType": "Process Service" }, { "JobId": "1716856", "Surname": "TEST SURNAME", "Suburb": "TEST SUBURB", "JobType": "Process Service" } ]
Andrew Milici 20 апр. 2016, в 00:42
0

На самом деле не пробовал это, но я не понимаю, почему нет.
alphapilgrim 20 апр. 2016, в 01:48
0

Можете ли вы включить небольшой фрагмент поиска?
alphapilgrim 20 апр. 2016, в 01:57
0

После небольшого перебора, удаления таймаута и добавления $scope.$apply(); непосредственно после $scope.jobs = resp.data; , я получаю эту ошибку: ionic.bundle.js: 25642 Ошибка: [$ rootScope: inprog] $ дайджест уже выполняется error.angularjs.org/1.4.3/$rootScope/inprog?p0=%24digest
Andrew Milici 20 апр. 2016, в 01:57
0

@alphapilgrim Конечно, я использую строку 1716 (которая, используя мои тестовые данные выше, должна возвращать только 1 задание), URL выглядит следующим образом: localhost: 56909 / api / fs / GetJobs / 1716 , и результат: [ {"JobId": "1716856", "Фамилия": "ИМЯ ТЕСТА", "Пригород": "ИМЯ ТЕСТА", "JobType": "Служба процесса"}] (проверяется с помощью анализатора пакетов)
Andrew Milici 20 апр. 2016, в 01:59

Показать ещё 6 комментариев

Теги:

javascript

ionic-framework

angularjs

1 ответ

Ещё вопросы

Возможно, вы могли бы использовать $ watch, а затем использовать функцию get там. Пусть обновит модель коллекции.
Извините, если это глупый вопрос (все еще относительно новый для Angular / Ionic), но сработает ли это, если пользователь должен нажать кнопку «поиск»? Будут ли $ watch знать, когда стрелять?
Можете ли вы вставить выходные данные resp.data ?
Конечно, вот начальные / GetJobs / [ { "JobId": "1717182", "Surname": "TEST SURNAME", "Suburb": "TEST SUBURB", "JobType": "Field Call" }, { "JobId": "1717374", "Surname": "TEST SURNAME", "Suburb": "TEST SUBURB", "JobType": "Process Service" }, { "JobId": "1716856", "Surname": "TEST SURNAME", "Suburb": "TEST SUBURB", "JobType": "Process Service" } ]
На самом деле не пробовал это, но я не понимаю, почему нет.
Можете ли вы включить небольшой фрагмент поиска?
После небольшого перебора, удаления таймаута и добавления $scope.$apply(); непосредственно после $scope.jobs = resp.data; , я получаю эту ошибку: ionic.bundle.js: 25642 Ошибка: [$ rootScope: inprog] $ дайджест уже выполняется error.angularjs.org/1.4.3/$rootScope/inprog?p0=%24digest
@alphapilgrim Конечно, я использую строку 1716 (которая, используя мои тестовые данные выше, должна возвращать только 1 задание), URL выглядит следующим образом: localhost: 56909 / api / fs / GetJobs / 1716 , и результат: [ {"JobId": "1716856", "Фамилия": "ИМЯ ТЕСТА", "Пригород": "ИМЯ ТЕСТА", "JobType": "Служба процесса"}] (проверяется с помощью анализатора пакетов)

alphapilgrim · Answer 1 · 2016-04-20T00-10-00.000Z

Попробуйте этот вариант, возможно, я также предлагаю не использовать ссылку $ 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>

Это форма поиска - у меня тоже будет трещина на приведенных выше изменениях кода, и я вижу <ion-header-bar style="background-color: transparent; " class="item-input-inset"> <form ng-submit="submitSearch()"> <label class="item-input-wrapper"> <i class="icon ion-search placeholder-icon"></i> <input type="search" placeholder="Search" ng-model="data.SearchText"> </label> </form> </ion-header-bar>
На первый взгляд кажется, что входные данные находятся вне области видимости. Я обновлю. Если вы повторно используете поисковый ввод во всем приложении, приведенное выше может не работать.