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

问题描述

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

I'm trying to populate data from a REST webservice in a table using ngTable.Data are shown, but they are neither sortable nor filterable. Filtering always returns empty list.

以下是我引用的API的链接: http://bazalt-cms.com/ng-table/

Here is a link to the API I am referencing: 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>

您有任何提示如何使它工作?尝试了其他可能的解决方案-均无效果-

You have any hints how to get this working? Tried different other possible solutions - and none worked - like:

• 用json数据异步填充AngularJS ngTable
• 通过具有NgTable参数的AJAX加载JSON
• 点击标题时排序ngTable不起作用

• asynchronously populating an AngularJS ngTable with json data
• Loading JSON via AJAX with NgTable parameters
• Sorting ngTable doesn't work when heading gets clicked

提前谢谢！

编辑: http://plnkr.co/edit/1Rp9szNtw8T3GtwpNaZG?p =预览

推荐答案

最后使angular 1.2.20和ng-Table 0.3.1正常工作.

只需查看 Plunker :对嵌套json进行排序和过滤对象和日期.

Just have a look at the Plunker: Sorting and filtering over nested json objects and dates.

感谢 Kostia Mololkin 的努力！

这篇关于AngularJS:带有json数据的ngTable:过滤和排序不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！