Question

我是Angular的新手。我创建了一个表，它成功加载了一组JSON数据并显示在我创建的表中。问题是列的排序。我想让用户能够根据显示的每一列对显示的数据进行排序。我试图按照ng-table页面中的教程，但不知何故它似乎不起作用。我试图仅通过特定列（timestampCreated，参见下面的示例）对数据进行排序，但即使这样也不起作用。有谁知道问题可能是什么？提前致谢！

这是HTML文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade Demo</title>
  </head>
  <body>
    <div class="col-lg-10">
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="panel-title">
            <h3>Purchases</h3>
          <div style="margin-top: 10px; margin-bottom:10px">
            <label ng-repeat="col in ctrl.cols" class="checkbox-inline">
            <input type="checkbox" ng-model="col.show">{{col.title}}
          </label>
        </div>
      </div>
     </div>
     <div class="panel-wrapper">
       <div class="panel-body">
         <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>
     </div>
   </div>
  </div>
 </body>
</html>

这是JS文件：

(function() {
'use strict';

angular
    .module('purchases')
    .controller('AnomaliesController', ['$log', '$scope', '$http', 'NgTableParams', function ($log, $scope, $http, NgTableParams) {

        this.cols = [
            {field:"purchaseID", title: "ID", sortable: "purchaseID", show: true },
            {field:"timestampCreated", title: "Date Created", sortable: "timestampCreated", show: true },
            {field:"customerNumber", title: "Customer Number", sortable: "customerNumber", show: true },
            {field:"contractNumber", title: "Contract Number", sortable: "contractNumber", show: true },
            {field:"reg", title: "Registration Number", sortable: "reg", show: true },
            {field:"iptf", title: "IPTF", sortable: "iptf", show: true },
            {field:"type", title: "Type", sortable: "type", show: true },
            {field:"status", title: "Status", sortable: "status", show: true },
            {field:"reviewStatus", title: "Review Status", sortable: "reviewStatus", show: true }
        ];

        $scope.populateTable = function () {

            this.tableParams = new NgTableParams({}, {
                filterDelay: 300,
                sorting: { timestampCreated: "asc" },
                getData: function (params) {
                    return $http({
                        method: 'GET',
                        url: '/server/purchases.json'
                    }).then(function (response) {
                        return response.data;
                    }, function (response) {
                        $log.log(response);
                        return [];
                    });
                }
            });
        }.bind(this);

    }]);

})();

Answer 1

将可排序列名称放在单引号中：

  <td title="'Name'"  sortable="'name'">
                {{user.name}}</td>

在你喜欢的情况下

 sortable: "'timestampCreated'"

Answer 2

尝试以下代码

(function() {
'use strict';

angular
    .module('purchases')
    .controller('AnomaliesController', ['$log', '$scope', '$http', 'NgTableParams', function ($log, $scope, $http, NgTableParams) {

        this.cols = [
            {field:"purchaseID", title: "ID", sortable: "purchaseID", show: true },
            {field:"timestampCreated", title: "Date Created", sortable: "timestampCreated", show: true },
            {field:"customerNumber", title: "Customer Number", sortable: "customerNumber", show: true },
            {field:"contractNumber", title: "Contract Number", sortable: "contractNumber", show: true },
            {field:"reg", title: "Registration Number", sortable: "reg", show: true },
            {field:"iptf", title: "IPTF", sortable: "iptf", show: true },
            {field:"type", title: "Type", sortable: "type", show: true },
            {field:"status", title: "Status", sortable: "status", show: true },
            {field:"reviewStatus", title: "Review Status", sortable: "reviewStatus", show: true }
        ];

        $scope.populateTable = function () {

            this.tableParams = new NgTableParams({
                sorting: { timestampCreated: "asc" }
              }, {
                filterDelay: 300,
                getData: function (params) {
                    return $http({
                        method: 'GET',
                        url: '/server/purchases.json'
                    }).then(function (response) {
                        return response.data;
                    }, function (response) {
                        $log.log(response);
                        return [];
                    });
                }
            });
        }.bind(this);

    }]);

})();

来源：{{3}}

使用NG-TABLE对列进行排序

2 个答案: