重新加载请求时 ng-Table 不呈现新数据 [英] ng-Table not rendering new data when reloading request

问题描述

我有一个带有 ng-table 的页面，它可以很好地处理初始数据.我有一个选择框，它根据选择的选项发送服务器请求，然后我将新数据发送到 angular，但没有使用 ng-table 进行更新.

这是我的观点:

<div class="plain-box"><table ng-table="tableParams" show-filter="true" class="table table-striped"><头><tr><th ng-repeat="列中的列" ng-show="column.visible"class="文本中心可排序" ng-class="{'sort-asc': tableParams.isSortBy(column.field, 'asc'),'sort-desc': tableParams.isSortBy(column.field, 'desc')}"ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">{{column.title}}</th></tr></thead><tr ng-repeat="$data 中的用户"><td ng-repeat="列中的列" sortable="column.field">{{用户[column.field]}}</td></tr></tbody>

我的控制器:

angular.module('reports').controller('ReportsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Reports', '$filter','ngTableParams',函数($scope, $stateParams, $location, Authentication, Reports, $filter, ngTableParams ) {$scope.reportBillingPeriod = 0;$scope.$watch('reportBillingPeriod', function(newValue, oldValue) {$scope.findReportData( newValue );});//$scope.reportBillingData = 0;$scope.findReportData = function( selectedMonth ){var selectedPeriod = selectedMonth;if( selectedPeriod === null )selectedPeriod = '0';$scope.customers_report = Reports.customer_report({月报表:selectedPeriod}, 函数(结果){var data = result.customers;$scope.columns = [{ title: 'Account Name', field: 'accountName', visible: true, filter: { 'name': 'text' } },{ 标题:'总收入'，字段:'planTotalAmount'，可见:true }];$scope.$watch('result', function () {$scope.tableParams.settings().$scope = $scope;$scope.tableParams.reload();});$scope.tableParams = 新 ngTableParams({page: 1,//显示第一页count: 10,//每页计数筛选: {name: 'O'//初始过滤器}}, {total: data.length,//数据长度获取数据:函数($延迟，参数){varorderedData = params.sorting() ?$filter('orderBy')(data, params.orderBy()) : 数据；$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));//$scope.reportBillingData = new Date();}});});};}]);

解决方案

$scope.$watch('result', function () {$scope.tableParams.settings().$scope = $scope;<<--嵌套作用域正在替换！！$scope.tableParams.reload();});

ngTable 指令创建嵌套范围，其中包含指令工作的所有设置，因此您不应将其替换为 ReportsController
的范围你需要删除这一行$scope.tableParams.settings().$scope = $scope;
并且你需要为ngTable指定所有参数，请看这里 在ngTables，第三次运行 $scope.tableParams.reload() 导致 TypeError:无法设置 null 的属性 '$data'

更新并且最好在 findReportData 函数之外使用 ngTableParams 初始化和 $watch 结果，以防止错误和不必要的重新初始化

更新 2我设置了 plunk，试着让它看起来更像原始问题，并模拟 httpservice，但这没关系，所有数据访问都必须在 ngTableParams 中的 getData func 中进行，并且在设置所有过滤器时需要调用(或者可能只是使用 $watch 就像在 plunk 中)你必须调用 $scope.tableParams.reload(); ，你可以尝试在上面的输入中输入一些数字，数据将毫无问题地更新.所有代码相关为了清晰起见，删除了排序、分页和过滤，所以 getData 如下所示:

 getData: function($defer, params) {var selectedPeriod = $scope.reportBillingPeriod ;//选定月份；if( selectedPeriod === null )selectedPeriod = '0';$scope.customers_report = Reports.get({//Reports.customer_report({月报表:selectedPeriod}, 函数(结果){var data = result.customers;$scope.tableParams.total(data.length);varorderedData = params.sorting() ?$filter('orderBy')(data, params.orderBy()) : 数据；$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));});}

观察过滤器变化如下:

 $scope.reportBillingPeriod = 0;$scope.$watch('reportBillingPeriod', function(newValue, oldValue) {$scope.tableParams.reload();});

更新 3
删除了重复的调用 getData func，编辑了 here问题出在 reportBillingPeriod 变量的 $watch 中，所以为了防止第二次数据上传，我们必须检查值是如何改变的，就像这里

$scope.reportBillingPeriod = defaultValue;$scope.$watch('reportBillingPeriod', function(newValue, oldValue) {//这是我们如何防止第二次调用如果(新值！=旧值)$scope.tableParams.reload();});

i have page with ng-table which works fine with initial data. I have a select box which send server request based on the option selected and then Iam getting new data to angular but is not updated with ng-table.

Here is my view:

<section data-ng-controller="ReportsController">
<div class="plain-box">
    <table ng-table="tableParams" show-filter="true" class="table table-striped">
        <thead>
        <tr>
            <th ng-repeat="column in columns" ng-show="column.visible"
                class="text-center sortable" ng-class="{
                    'sort-asc': tableParams.isSortBy(column.field, 'asc'),
                    'sort-desc': tableParams.isSortBy(column.field, 'desc')
                  }"
                ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
                {{column.title}}
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="user in $data">
            <td ng-repeat="column in columns" sortable="column.field">
                {{user[column.field]}}
            </td>
        </tr>
        </tbody>
    </table>
</div>

My controller:

angular.module('reports').controller('ReportsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Reports', '$filter', 'ngTableParams',
function($scope, $stateParams, $location, Authentication, Reports, $filter, ngTableParams ) {
    $scope.reportBillingPeriod = 0;
    $scope.$watch('reportBillingPeriod', function(newValue, oldValue) {
        $scope.findReportData( newValue );
    });
    //$scope.reportBillingData = 0;


    $scope.findReportData = function( selectedMonth ){
        var selectedPeriod = selectedMonth;
        if( selectedPeriod === null )
        selectedPeriod = '0';
        $scope.customers_report = Reports.customer_report({
        monthReport: selectedPeriod
        }, function( result ){
        var data = result.customers;
        $scope.columns = [
            { title: 'Account Name', field: 'accountName', visible: true, filter: { 'name': 'text' } },
            { title: 'Gross Revenue', field: 'planTotalAmount', visible: true }
        ];

   $scope.$watch('result', function () {
        $scope.tableParams.settings().$scope = $scope;
        $scope.tableParams.reload(); 
    });

        $scope.tableParams = new ngTableParams({
            page: 1,            // show first page
            count: 10,          // count per page
            filter: {
            name: 'O'       // initial filter
            }
        }, {
            total: data.length, // length of data
            getData: function($defer, params) {
            var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            //$scope.reportBillingData = new Date();
            }
        });
        });
    };
}]);

解决方案

$scope.$watch('result', function () {
        $scope.tableParams.settings().$scope = $scope; <<--nested scope is replacing!!
        $scope.tableParams.reload(); 
    });

ngTable directive create nested scope which inculde all settings for directive to work,so you shoudn't replace it with scope of ReportsController
you need to remove this row $scope.tableParams.settings().$scope = $scope;
And you need to specify all parameters for ngTable,please have a look here In ngTables, running $scope.tableParams.reload() for the third time results in TypeError: Cannot set property '$data' of null

UPDATE and also it's better take ngTableParams intialization and $watch for result outside findReportData function in order to prevent errors and unnecessary re-initialization

UPDATE 2 i set up plunk,try to make it more look like original question,and mock httpservice, but that's not matter,all data access must be going inside getData func in ngTableParams and when set up all filter you need to call(or maybe just using $watch like in plunk) you have to call $scope.tableParams.reload(); ,you can try to type some numbers in input above and data will be updating without problem.all code related to sorting ,pagging and filtering is removed for clarity, so getData look like following:

 getData: function($defer, params) {
        var selectedPeriod = $scope.reportBillingPeriod ; //selectedMonth;
         if( selectedPeriod === null )
    selectedPeriod = '0';
    $scope.customers_report = Reports.get({   //Reports.customer_report({
    monthReport: selectedPeriod
    }, function(result ){
    var data = result.customers;
     $scope.tableParams.total(data.length);


    var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

    });      

        }

and watching for filter change look like follow:

 $scope.reportBillingPeriod = 0;
    $scope.$watch('reportBillingPeriod', function(newValue, oldValue) {
        $scope.tableParams.reload(); 
     });

UPDATE 3
removed duplication of invocation getData func,edited here the issue was laid in $watch of reportBillingPeriod variable,so in order to prevent second data upload we have to check how values is changed, like here

$scope.reportBillingPeriod = defaultValue;
    $scope.$watch('reportBillingPeriod', function(newValue, oldValue) {
        //this how we prevent second call
        if (newValue!=oldValue)
        $scope.tableParams.reload(); 
     });

这篇关于重新加载请求时 ng-Table 不呈现新数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！