ng-Table not rendering new data when reloading request

后端 未结 1 750
轮回少年
轮回少年 2020-12-17 06:04

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 ang

1条回答
  •  有刺的猬
    2020-12-17 06:43

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

    0 讨论(0)
提交回复
热议问题