Question

我创建了一个表，我使用http来加载表中的数据。因此，在每次单击时，我的表数据都在变化，但我没有在表中看到更新的数据。我为参考创建了一个样本Plunker。在我的项目中，当我点击重新加载新数据时，表格中的数据会被更改，但在2-3点击后它不会改变。 DId任何人都知道，如何解决它..

Answer 1

这是ngTable指令的问题。它仅在data.length更改时更新。看一下这个plunk。我将$ scope [＆＃39; tableParams1＆＃39;]设置为null，并在$timeout内设置新数据。这迫使angularJs进行新的循环。因此在第一个循环中，ngTable看到data.length更改为0，在新循环中，ngTable看到data.length再次更改。如果你不使用$ timeout，ngTable将看到data.length保持与以前相同的状态，并且不会做任何事情。

Answer 2

经过一些反复试验，我发现了一个看似比解决方案更好的解决方案。为清楚起见，我在服务中使用$ resource来获取我的数据。当我通过模态添加记录时，首先它不会在关闭模态后上传ng表。我想出了一种适合我的方式：

// Get data from factory
var data = dataFactory.query();

//Use promise to load data to table, note the replacing of the second tableParams 
//object parameter with a function
data.$promise.then(function (data){
    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,
        sorting: {
            name: 'asc'
        },
        filter: {
            name: undefined             
        }
    }, resetTableParams()
    );
});

//The function that replaces the tableParams param
var resetTableParams = function(){
    return {
        total: data.length,
        getData: function($defer, params) {
            var filteredData = params.filter() ? $filter('filter')(data, params.filter()) : data;
            var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData; 

            params.total(orderedData.length);
            $defer.resolve($scope.data = orderedData.slice((params.page() -1) * params.count(), params.page() * params.count()));           
            }
    }
}

//A method to update the table that can be called when closing a modal
var updateTable = function(){
    data = dataFactory.query();
    data.$promise.then(function (data){
        $scope.tableParams.reload();
    });
}

// Add table row to table in modal and call updateTable() on closing modal
$scope.addRow = function(){
    var modalInstance = $modal.open({
        templateUrl: 'resources/partials/newrecord.html',
        controller: NewRecordModalCtrl
    })

    modalInstance.result.then(function(){
        updateTable();
    });
}

不幸的是，我无法清楚解释为什么这样做有效，而其他方法也没有。例如，如果您不使用resetTableparams（）函数但保留硬编码，则表不会更新。不知何故，Angular的消化周期更喜欢这个:)如果有人有一个很好的解释，请分享！

Answer 3

您可以直接使用提供的方法$scope.tableParams.reload();

Answer 4

我不确定错误递增的确切原因，但这里的问题可能更多是由于这种方法。您应该通过$scope.count将计数附加到范围，然后使用ng-click指令递增它：<button type="button" ng-click="count++;"。

如果您将$scope.tableParams和来自$scope.table1条件的数据外部化，那么您/其他人也可以更轻松地阅读和调试：

$scope.count = 0;

var dataCollections = [
    [//.. first collection],
    [//.. second collection],
    [//.. third collection],
    [//.. fourth collection]
];

$scope.data = dataCollections[0];

$scope.$watch('count', function () {
    $scope.data = $scope.count < 4 ? dataCollections[$scope.count] : dataCollections[3];
});

我也不确定你在控制器内部使用$compile进行了什么操作。如果您在深入研究使用第三方模块之前调查了一些关于编写Angular控制器的内容，它可能会使您的任务更容易。

Answer 5

我正在处理带动态数据的ng-tables（添加/删除），
我使用ajax调用对数据库进行了更改，success: function() {}属性对tableParams进行了更改。但更改不会显示在页面上，除非我刷新它，只有几个console.log()，我发现success: function() {}实际上从未执行过但是还有另一个始终执行的功能，complete: function() {} 我知道，只有在成功调用complete: function() {}之后才能使代码工作在逻辑上是错误的，但是如果我的success:函数不起作用，那么这个修复并不是那么糟糕，特别是知道总是成功地对数据库进行更改这很奇怪，因为成功通话在网站的其他页面上有效，但在其他网页上却没有。修改
好吧，如果数据的长度没有改变，如上所述“编辑数据中的文本”，这个修复仍然无法解决问题，令人沮丧......

$.ajax({ type: "POST", url: /*some url*/, data: JSON.stringify({ /*some variable*/ } }), contentType: "application/json; charset=utf-8", dataType: "Json", success: function () { // would never execute even if it's a successful call console.log("success"); }, error: function() { // optional, personally didn't try it console.log("error"); } complete: function () { //always executes regardless of the result console.log("complete"); } });

Answer 6

要解决此问题，请确保您在页面中仅设置ng-controller="yourController"一次。

以下代码不会更新数据：

<div ng-controller="yourController">
  <table ng-table = "tableParams" ng-controller = "yourController">
  </table>
</div>

通过删除html页面中的额外ng-controller来解决问题：

<div ng-controller="yourController">
  <table ng-table = "tableParams">
  </table>
</div>

ng-table不适用于动态数据

6 个答案: