Question

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

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>

填充表格的函数是：

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

此代码有效，但如果我在表中添加新项目则不会显示 add的代码是：

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

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

任何人都可以帮助我。

Answer 1

在将任何数据或记录发布/保存到数据库后更新数据的一种简单方法可以是

保存/更新成功后只有一个get请求

我的意思是你可以调用对数据库有get请求的服务/工厂函数，然后将响应分配给表的范围对象

谢谢

Answer 2

如果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：请注意，Angular 1.4.4中不推荐使用HttpPromise上的success（）和error（）方法（参见https://code.angularjs.org/1.4.4/docs/api/ng/service/ $ http）。

添加新数据后，ngTable不会更新

2 个答案: