AngularJS：带有json数据的ngTable：过滤和排序不起作用答案

【问题标题】：AngularJS: ngTable with json data: filtering and sorting does not workAngularJS：带有json数据的ngTable：过滤和排序不起作用
【发布时间】：2014-12-06 01:41:38
【问题描述】：

我正在尝试使用 ngTable 将来自 REST Web 服务的数据填充到表中。显示了数据，但它们既不可排序也不可过滤。过滤总是返回空列表。

这是我引用的 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

【问题讨论】：

是否对type 和name 列进行过滤和排序？
没有。它一般不起作用。
plunk在这里会有用，你能设置一下吗？
已编辑帖子，带有指向 plunk 的链接
这很有帮助

标签： json angularjs sorting filtering ngtable

【解决方案1】：

您需要将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>

编辑

排序

我知道params.orderBy() 发生了什么事，例如"-type" 和$filter("OrderBy") 无法解析这个，这只需要"type" 字符串，如果你想反转你必须做$filter('orderBy')(filteredData, "type",-1) 这个字符串

【讨论】：

感谢您的回答。玩过这个。排序对我来说只有第一次点击才有效。过滤仍然不起作用。但是您对ngTable 使用$data 作为变量的解释很有帮助。
用更多数据更新了 Plunk。过滤工作 - 我不知道为什么。过滤 date 不会返回最初的预期值：日期过滤器适用于来自 json 的时间戳，而不适用于格式化的日期字符串。知道如何解决这个问题吗？
让我看看如何处理时间
我知道了，你必须为收集指定自定义数组过滤器才能做到这一点，这里有一些很好的解释toddmotto.com/everything-about-custom-filters-in-angular-js
我稍后会为此做一些事情

【解决方案2】：

让这个运行。似乎使用不同版本的 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

【讨论】：

【解决方案3】：

终于可以使用angular 1.2.20 和ng-Table 0.3.1。

看看Plunker：对嵌套的 json 对象和日期进行排序和过滤。

感谢Kostia Mololkin的努力！

【讨论】：