4

我创建了一个表，我正在使用 http 加载表中的数据。所以，在每次点击中，我的表格数据都会发生变化，但我没有在表格中看到更新的数据。我创建了一个示例Plunker供参考。在我的项目中，当我点击重新加载新数据时，表中的数据发生了变化，但在点击 2-3 次后它并没有改变。有谁知道，如何解决它..

4

6 回答 6

4

经过反复试验，我找到了一个看似比 plunkrs 中指出的更好的解决方案。为清楚起见，我在服务中使用 $resource 来获取我的数据。当我通过模态添加记录时，起初它不会在关闭模态后上传 ng-table。我想出了一个适合我的方法：

// 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 的摘要循环更喜欢这个 :) 如果有人有很好的解释，请分享！

于 2014-08-19T10:50:09.917 回答
4

这是 ngTable 指令的问题。它仅在data.length更改时更新。看看这个笨蛋。我将 $scope['tableParams1'] 设置为 null 并在其中$timeout设置了新数据。这迫使 angularJs 做一个新的循环。因此，在第一个周期中，ngTable 看到 data.length 更改为 0，在新周期中，ngTable 看到 data.length 再次更改。如果您不使用 $timeout，ngTable 将看到 data.length 与以前保持一致，并且不会执行任何操作。

于 2014-04-27T17:22:57.140 回答
3

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

于 2015-06-01T10:23:57.203 回答
0

我不确定增量不正确的确切原因，但这里的问题可能更多是由于这种方法。您应该通过 将计数附加到范围$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 控制器的内容，这可能会使您的任务更轻松。

于 2014-04-27T16:56:38.213 回答
0

我也在处理带有动态数据的 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"); 
        }
    });
于 2014-11-27T11:28:09.697 回答
0

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

下面的代码不会更新数据：

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

通过删除ng-controllerhtml 页面中的额外内容来解决问题：

<div ng-controller="yourController">
  <table ng-table = "tableParams">
  </table>
</div>
于 2016-04-06T05:05:49.333 回答