Question

ngTable文档不提供完整的信息和示例代码，也很难理解。我设法制作波纹管代码来动态地从服务器获取和显示表。但是，当我单击表头进行排序时，会再次触发getData（以及$ http），结果是单击后，列没有排序，但显示的数据自身水平加倍（例如，打开时页面，显示的列是[id，name]，点击表头的一列后，它变为[id，name，id，name]。

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

我犯了什么错误？

Answer 1

解决方法是放弃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是如何运作的。

停止ngTable getData for ngTableDynamic以在排序时获取数据

1 个答案: