angularjs - 如何使用动态数据刷新从 http 请求加载的 NG-Table

Question

我需要能够刷新我的 ng-table 中的数据。下图包含完整的用例场景。 当用户点击搜索 BrandID 时，会出现一个新的模态窗口：

它包含一个 ng 表，其中包含一些加载的数据。模式关闭后，我单击第二个搜索（GroupID），这里打开了带有 ng-table 的相同模式窗口，但即使请求正常并且从服务器返回数据，加载也会失败：

我希望能够刷新表，以便用新收到的数据对其进行初始化。

每次模态切换时都会调用Plunker中的脚本。

Answer 1

试试这个来更新表数据：

$scope.tableParams.reload();

编辑：我在你的代码中发现了一个可能的错误......我认为你应该改变这个：

var orderedData = params.sorting() ?
   $filter('orderBy')(filteredData, params.orderBy()) :
   $scope.datay;

对此：

var orderedData = params.sorting() ?
   $filter('orderBy')(filteredData, params.orderBy()) :
   filteredData;

这样效果更好吗？

Answer 2

可以在此处找到该问题的解决方案。这不是一个好的解决方案，但目前它是最好的。通过为每个请求强制不同的计数，表将重新加载它的数据，您将获得所需的结果。可以在此处找到新的 Plunk 请注意每个请求的每页计数不同的重要性。如果 count 属性设置为相同的数字，则解决方案将失败。我希望这能说清楚，我也希望 ng-table 的开发者能解决这个问题

Answer 3

伙计们，现在我支持这个 repo 并最终在v0.4.2中修复了问题！

Answer 4

此代码示例似乎有效，请检查此 SO 问题以获得更多解释： ng-table not working for dynamic data

// 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();
    });
}