정렬 할 때 ngTableDynamic에 대한 ngTable getData를 중지하여 데이터를 가져옵니다.

ngTable 문서는 완전한 정보와 샘플 코드를 제공하지 않으므로 따르기가 어렵습니다. 필자는 서버에서 테이블을 동적으로 가져오고 표시하는 코드를 작성했습니다. 그러나 정렬 할 표 머리글을 클릭하면 getData (및 $ http)가 다시 트리거되고 결과는 클릭 후 열이 정렬되지 않지만 표시되는 데이터는 가로로 두 배가됩니다 (예 : 페이지에서 표시된 열은 [id, name]이고, 표 머리글의 열을 클릭하면 [id, name, id, name]이됩니다. 정렬 할 때 ngTableDynamic에 대한 ngTable getData를 중지하여 데이터를 가져옵니다.

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <title><%= title %></title> 
    <meta charset="utf-8"> 
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script> 
    <script type="text/javascript" src="bower_components/ng-table/ng-table.min.js"></script> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="bower_components/ng-table/ng-table.min.css" /> 
    <script> 
    (function() { 
     'use strict'; 
     let app = angular.module('myApp', ['ngTable']); 
     app.controller('demoCtrl', ['$http', 'NgTableParams', function ($http, NgTableParams) { 
     let ctrl = this; 
     ctrl.cols = []; 
     ctrl.rows = []; 
     ctrl.tableParams = new NgTableParams({}, { 
      getData: function (params) { 
      ctrl.xhr = $http({ 
       method: 'GET', 
       url: '/ng-table-demo/test_data', 
      }).then(function (rsp) { 
       let cols = Object.keys(rsp.data[0]); 
       for(let i = 0; i < cols.length; i++) { 
       ctrl.cols.push({field: cols[i], title: cols[i], sortable: cols[i], show: true}); 
       } 
       ctrl.rows = rsp.data; 
       return ctrl.rows; 
      }, function (rsp) { 
       console.log('http failed.'); 
      }); 
      return ctrl.xhr; 
      }}); 
     }]); 
     })(); 

    (function() { 
     "use strict"; 
     angular.module("myApp").run(configureDefaults); 
     configureDefaults.$inject = ["ngTableDefaults"]; 
     function configureDefaults(ngTableDefaults) { 
     ngTableDefaults.params.count = 5; 
     ngTableDefaults.settings.counts = []; 
     }})(); 
    </script> 
</head> 
<body> 
    <div ng-app="myApp" ng-controller="demoCtrl as ctrl" class="container-fluid"> 
    <h2>ng-table-demo</h2> 
    <table ng-table-dynamic="ctrl.tableParams with ctrl.cols" class="table table-condensed table-bordered table-striped"> 
     <tr ng-repeat="row in $data"> 
     <td ng-repeat="col in $columns">{{row[col.field]}}</td> 
     </tr> 
    </table> 
    </div> 
</body> 
</html>

내가 울부 짖는 소리와 함께 ctrl.xhr 블록을 둘러싸려고, 그것은 복제 중지하지만 정렬 어쨌든 발생하지 않습니다.

if(ctrl.xhr === undefined) { 
    ctrl.xhr = $http...; 
} 
return ctrl.xhr;

어떤 실수를 했습니까?

출처

2017-11-05 Oops

해결 방법은 getData이며, xhr에서 dataset을 성공으로 설정했습니다. 벨로우즈 코드가 작동했습니다.

(function() { 
    'use strict'; 
    let app = angular.module('myApp', ['ngTable']); 
    app.controller('demoCtrl', ['$http', 'NgTableParams', function ($http, NgTableParams) { 
    let ctrl = this; 
    ctrl.cols = []; 
    $http({ 
     method: 'GET', 
     url: '/ng-table-demo/test_data', 
    }).then(function (rsp) { 
     let cols = Object.keys(rsp.data[0]); 
     for (let i = 0; i < cols.length; i++) { 
     ctrl.cols.push({ 
      field: cols[i], 
      title: cols[i], 
      sortable: cols[i], 
      show: true 
     }); 
     } 
     ctrl.tableParams = new NgTableParams({}, { 
     dataset: rsp.data 
     }); 
    }, function (rsp) { 
     console.log('http failed.'); 
    }); 
    }]); 
})();

그래도 나는 getData이 어떻게 작동하는지 모르겠다.

출처

2017-11-06 13:20:15 Oops

정렬 할 때 ngTableDynamic에 대한 ngTable getData를 중지하여 데이터를 가져옵니다.

답변

관련 문제