Question

我尝试使用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

Answer 1

最后让事情与angular 1.2.20和ng-Table 0.3.1一起使用。

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

感谢Kostia Mololkin的努力！

Answer 2

您需要将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)这个字符串

Answer 3

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

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

3 个答案:

修改

排序