angularjs – ng-Table在重新加载请求时不呈现新数据

发布时间：2020-12-17 07:52:15 所属栏目：安全来源：网络整理

导读：我有ng-table页面,可以正常使用初始数据.我有一个选择框,根据选择的选项发送服务器请求,然后我将新数据转换为角度但不更新ng-table. 这是我的观点： section data-ng-controller="ReportsController"div class="plain-box" table ng-table="tableParams" sho

我有ng-table页面,可以正常使用初始数据.我有一个选择框,根据选择的选项发送服务器请求,然后我将新数据转换为角度但不更新ng-table.

这是我的观点：

<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>

我的控制器：

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指令创建嵌套范围,其中包含指令的所有设置,因此您不应该使用ReportsController的范围替换它
你需要删除这一行
$scope.tableParams.settings().$scope = $scope;

你需要为ngTable指定所有参数,请看一下
这里In ngTables,running $scope.tableParams.reload() for the third time results in TypeError: Cannot set property ‘$data’ of null

UPDATE
并且最好采取ngTableParams初始化和$watch for findReportData函数之外的结果,以防止错误和不必要的重新初始化

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

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

    });      

        }

并观察过滤器更改,如下所示：

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!