2016-01-06 4 views
1

моя проблема в том, что если я добавлю новый элемент в базу данных, ngTable не будет обновляться новыми данными автоматически, но если я обновляю страницу (f5), данные будут показаны. Я использую таблицу ng для отображения данных.ngTable не обновляется после добавления новых данных

PS: AngularJS потребляет данные от JSON, произведенные успокоительным WS от бэкэнд JEE, подключенного к базе данных.

НГ стол:

<table ng-table="tablePy" show-filter="true" 
        class="table table-striped table-bordered table-hover"> 
       <thead> 
       <tr> 
        <th> Code </th> 
        <th> Libellé</th> 
        <th>Code Alphabetique 2</th> 
        <th>Code Alphabetique 3</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr data-ng-repeat=" py in paysValues | filter:searchValeur "> 

        <td align="right"> {{py.codPay}}</td> 
        <td > {{py.libPay}}</td> 
        <td> {{py.codAlph2}}</td> 
        <td> {{py.codAlph3}}</td> 
       </tr> 
       </tbody> 
      </table> 

функция, заполнить таблицу является:

var initPaysData = function() { 
    var promise = 
     allPaysService.getPays(); 
    promise.then(
     function (res) { 
      $scope.paysValues = res.data; 
      $scope.tablePy = new NgTableParams({}, {dataset: $scope.paysValues}); 
     }, 
     function (error) { 
      $log.error('failure Pays charging', error); 
     }) 
}; 
initPaysData(); 

Я использую фабрику, чтобы получить все данные из WS:

BrokoApp.factory('allPaysService', function ($http) { 
return { 
    getPays: function() { 
     return $http.get('http://localhost:8080/BrokWeb/webresources/referentiel/pays'); 
    } 
} 
}); 

этот код работает, но если я добавлю новый элемент в таблицу, не отображается , код добавления:

$scope.addPays = function() { 
    $scope.selectedPy = $scope.libPay; 
    ngDialog.openConfirm({ 
     template: 'modalDialogAdd', 
     className: 'ngdialog-theme-default', 
     scope: $scope 
    }).then(function() { 
     console.log('***** before add length=' + $scope.paysValues.length); 
     ajouterPays(); 
     initPaysData(); 
     console.log('***** after add length=' + $scope.paysValues.length); 
     $scope.tablePy.total($scope.paysValues.length); 
     $scope.tablePy.reload(); 
    }, function() { 
     setNotification(notifications, 'danger', 'Erreur', 'Vous avez annule l operation'); 
    }); 
}; 

console.log показывают, что длина списка данных является то же самое до и после Add, консоль шоу:

***** before add length=152 
***** after add length=152 
XHR finished loading: GET "http://localhost:8080/BrokWeb/webresources/referentiel/pays". 
a XHR finished loading: POST "http://localhost:8080/BrokWeb/webresources/referentiel/pays". 

функциональных AjouterPays является

var ajouterPays = function() { 

    var paysData = { 
     codAlph2: $scope.codAlph2, 
     // getting data from the adding form 
    }; 
    var res = addPaysService.addPys(paysData); 
    res.success(function() { 
     setNotification(notifications, 'success', 'Succes', 'Ajout de ' + paysData.libPay); 
    }); 
    res.error(function() { 
     setNotification(notifications, 'danger', 'Erreur', 'Erreur est servenue au cours de la creation'); 
    }); 
    // Making the fields empty 
    $scope.codAlph2 = ''; 
}; 

я использую фабрику addPaysService для отправки данных

BrokoApp.factory('addPaysService', function ($http) { 
return { 
    addPys: function (PyData) { 
     return $http.post('http://localhost:8080/BrokWeb/webresources/referentiel/pays', PyData); 
    } 
} 
}); 

Может кто-нибудь мне помочь.

ответ

3

Один простой подход к Updation данных после того, как вы после/сохранить любые данные или запись в базе данных может быть

просто запрос GET после сохранения/обновления успешно

я имею в виду вас может вызвать функцию обслуживания/фабрики, которая имеет запрос GET к базе данных, а затем назначить ответ на области видимости объекта таблицы

Спасибо

+0

спасибо. Я должен назвать фабрику получения allData в успешной части сообщения. res.success (функция() { initPaysData() setNotification (уведомления, 'success', 'Succes', 'Ajout de' + paysData.libPay); }); – siwar

1

В случае успеха POST, вы можете добавить созданный элемент (если возвращается вашей службой) в $ scope.paysValues. Может быть что-то вроде этого:

var ajouterPays = function() { 

    var paysData = { 
     codAlph2: $scope.codAlph2, 
     // getting data from the adding form 
    }; 
    var promise = addPaysService.addPys(paysData); 
    promise.success(function (response) { 

     $scope.paysValues.push(response.data); 

     setNotification(notifications, 'success', 'Succes', 'Ajout de ' + paysData.libPay); 
    }); 
    promise.error(function() { 
     setNotification(notifications, 'danger', 'Erreur', 'Erreur est servenue au cours de la creation'); 
    }); 
    // Making the fields empty 
    $scope.codAlph2 = ''; 
}; 

Если служба не возвращает созданный элемент в случае успеха, вы можете просто нажать данные, которые вы послали вместо этого.

PS: обратите внимание, что методы success() и error() на HttpPromise устарели из Angular 1.4.4 (см. https://code.angularjs.org/1.4.4/docs/api/ng/service/ $ http).

+1

в функции ajouterPays, возможно, вам придется добавить новые данные, поступающие с сервера в качестве параметра, например: res.success (function (newPaysData) {$ scope.paysValues.push (newPaysData);}) – jyrkim

+0

Да, вы на 100% прав - конечно, если служба возвращает некоторые данные после публикации :-) – jyrkim

Смежные вопросы