使用NG排序列表

我是Angular的新手。我創建了一個成功加載一組JSON數據並顯示在我創建的表中的表。問題是列的排序。我想讓用戶能夠根據顯示的每一列對顯示的數據進行排序。我試圖按照ng-table頁面中的教程，但不知怎的，它似乎不工作。我試圖僅通過特定列（timestampCreated，請參見下面的示例）對數據進行排序，但即使這樣也行不通。有誰知道這個問題可能是什麼？提前致謝！使用NG排序列表

這是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); 

    }]); 

})();

來源

2016-07-13 Anto

試試這個http://jsfiddle.net/vojtajina/js64b/14/ –

你能向我們提供您的HTML代碼？ – Mistalis

我剛剛添加了HTML代碼 – Anto

將排序的列名：

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

在你的情況是這樣

sortable: "'timestampCreated'"

來源

2016-07-13 10:30:42 Keshav

試試下面的代碼

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

    }]); 

})();

來源：http://ng-table.com/#/sorting/demo-sorting-basic

來源

2016-07-13 10:33:57

它不起作用，無論如何 – Anto

使用NG排序列表

回答

相關問題