AngularJS：與json數據ngTable：篩選和排序不起作用

我想從表中使用ngTable填充REST web服務中的數據。顯示數據，但它們既不可排序也不可過濾。過濾總是返回空列表。AngularJS：與json數據ngTable：篩選和排序不起作用

下面是我引用的API鏈接：http://bazalt-cms.com/ng-table/

JS：

$scope.dataInstances = []; 
$scope.getDataInstances = function() { 
    $http({ 
     method : 'GET', 
     url : '/rest/v1/data/instances', 
     headers : { 
      "Authorization" : "Basic " + btoa("USERNAME" + ":" + "PASSWORD") 
     }, 
    }) 
    .success(function(data, status) { 
     $scope.dataInstances = data; 
     $scope.tableParams.reload(); 
     // just some logging 
     console.log(JSON.stringify(data)); 
    }) 
    .error(function(data, status) { 
     alert("Error: " + status); 
    }); 
}; 
$scope.tableParams = new ngTableParams({ 
     page: 1,  // show first page 
     count: 10, // count per page 
     filter: { 
     }, 
     sorting: { 
      date: 'asc'  // initial sorting 
     } 
    }, 
    { 
     total: $scope.dataInstances.length, // length of data 
     getData: function($defer, params) { 
      // use build-in angular filter 
      var filteredData = params.filter() ? 
        $filter('filter')($scope.dataInstances, params.filter()) : 
         $scope.dataInstances; 
      var orderedData = params.sorting() ? 
        $filter('orderBy')(filteredData, params.orderBy()) : 
         $scope.dataInstances; 
      params.total(orderedData.length); // set total for recalc pagination 
      $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
     } 
});

HTML：

<div ng-controller="myController" ng-init="getDataInstances()"> 
    <table ng-table="tableParams" show-filter="true" class="table table-condensed"> 
    <tr ng-repeat="dataInstance in dataInstances"> 
     <td data-title="'Name'" sortable="'name'" filter="{ 'name' : 'text'}">{{dataInstance.name}}</td> 
     <td data-title="'Date'" sortable="'date'" filter="{ 'date' : 'text'}">{{dataInstance.date | date:'dd.MM.yyyy HH:mm' }}</td> 
     <td data-title="'Type'" sortable="'type'" filter="{ 'type' : 'text'}">{{dataInstance.type}}</td> 
    </tr> 
    </table> 
</div>

您有任何提示如何得到這個加工？提前

感謝：喜歡 - 嘗試了不同的其他可能的解決方案 - 而且沒有工作！

編輯：http://plnkr.co/edit/1Rp9szNtw8T3GtwpNaZG?p=preview

來源

2014-10-10 Second2None

正在過濾和排序'type'和'name'列的工作嗎？ – 2014-10-11 06:33:46

不，一般不起作用。 – Second2None 2014-10-11 09:54:32

plunk將會在這裏有用，你可以設置它嗎？ – 2014-10-11 09:58:27

您需要申請ng-repeat指令$data變量，至極由ngtable

<tr ng-repeat="dataInstance in $data"> 
      <td data-title="'Name'" sortable="'name'" filter="{ 'name' : 'text'}">{{dataInstance.name}}</td> 
      <td data-title="'Date'" sortable="'date'" filter="{ 'date' : 'text'}">{{dataInstance.date | date:'dd.MM.yyyy HH:mm' }}</td> 
      <td data-title="'Type'" sortable="'type'" filter="{ 'type' : 'text'}">{{dataInstance.type}}</td> 
      </tr>

使用編輯

排序

我知道了這是怎麼回事在上產生這種刺痛例如"-type"和$filter("OrderBy")無法解析此，只需要"type"字符串，如果你想扭轉你必須做$filter('orderBy')(filteredData, "type",-1)這個字符串

來源

2014-10-11 11:41:44

感謝您的回答。玩這個。只有第一次點擊才能排序。過濾仍然無效。但是你的解釋是'ngTable'使用'$ data'作爲變量是很有幫助的。 – Second2None 2014-10-11 11:45:22

是的，只有第一次工作，然後沒有 – 2014-10-11 11:48:19

需要調查 – 2014-10-11 11:56:14

得到這個運行。似乎使用不同版本的ng-Table和angular.js有很大的差異。 angular 1.2.20和ng-Table 0.3.0在非嵌套json數據上一起工作良好。

angular 1.2.20和ng-Table 0.3.1確實嵌套數據的良好排序但不過濾（Plunk）

任何解決方案，這？

編輯：angular 1.2.3和ng-Table 0.3.1將是解決辦法，但我不得不使用angular 1.2.20

來源

2014-10-11 15:58:45 Second2None

最後得到的東西與angular 1.2.20和ng-Table 0.3.1工作。

只需看看Plunker：對嵌套的json對象和日期進行排序和過濾。

感謝Kostia Mololkin的努力！

來源

2014-10-12 01:18:58 Second2None

AngularJS：與json數據ngTable：篩選和排序不起作用

回答

使用編輯

排序

相關問題