添加新数据后 ngTable 不更新

Question

我的问题是，如果我向数据库添加新项目，ngTable 不会自动更新新数据，但如果我刷新页面 (f5)，则会显示数据。我使用 ng table 来显示数据。

PS：AngularJS 使用来自连接到数据库的 JEE 后端的 restful WS 生成的 JSON 的数据。

ng-table :

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

填充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');
    }
}
});

此代码有效，但如果我向 table 添加新项目，则不会显示添加的代码是：

$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前后List of data的长度相同，控制台显示：

***** 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 来 post 数据

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

谁能帮帮我。

Answer 1

更新数据的一种简单方法post/save 任何数据或数据库记录都可以

在save/update成功后有一个get请求

我的意思是您可以调用 service/factory 函数，该函数具有对数据库的 get 请求，然后将响应分配给 table

的范围对象

谢谢

Answer 2

如果 POST 成功，您可以在 $scope.paysValues 中添加创建的元素（如果 return 由您的服务编辑）。也许是这样的：

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 = '';
};

如果您的服务没有return成功创建的元素，您可以简单地推送您发送的数据。

PS：请注意，HttpPromise 上的 success() 和 error() 方法已从 Angular 1.4.4 中弃用（参见 https://code.angularjs.org/1.4.4/docs/api/ng/service/$http）。

添加新数据后 ngTable 不更新

ngTable don't updated after add new data

json

angularjs

ngtable