javascript - 如何排序和过滤 ngTable 日期(毫秒)数据？

Question

我是 Angularjs 的新手，需要一些帮助以降序排列日期(以毫秒为单位)以及表格列的过滤器。我创建了一个 plunker here但是当我输入一些过滤器参数时，我看不到任何过滤后的数据，并且数据从表中丢失了。

请帮助我对日期列进行排序并进行不区分大小写的过滤器搜索，下面我提供了我的代码。

<table ng-table="tableParams" show-filter="true" class="table" >
  <tr ng-repeat="item in $data" height="10px">
    <td data-title="'Date'" filter="{ 'item[0]': 'date' }" sortable="'item[0]'">{{translate(item[0])}}</td>
    <td data-title="'Count'" filter="{ 'item[1]': 'text' }" sortable="'item[1]'">{{item[1]}}</td>
  </tr>
</table>

$scope.translate = function(value) {
    if (value == null || value == undefined)
        return value;
    var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
    var myDate = new Date( value );
    return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " "+myDate.getFullYear();
}
$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10          // count per page        
}, {
    total: $scope.tasksRunDataForTable.length, // length of data
    getData: function($defer, params) {
        // use build-in angular filter
        var sortedData = params.sorting() ?
                            $filter('orderBy')($scope.tasksRunDataForTable, params.orderBy()) :
                            $scope.tasksRunDataForTable;
        var orderedData = params.filter() ?
               $filter('filter')(sortedData, params.filter()) :
               sortedData;
        params.total(orderedData.length); // set total for recalc pagination
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});

更新

我能够在计数上进行过滤工作，但在两列上的日期和排序都没有运气。 Updated plunker

<td data-title="'Count'" filter="{ '1': 'text' }" sortable="'1'">{{item[1]}}</td>

Answer 1

日期排序

这不是 ngTable 的问题，而是“OrderBy”的底层 Angular 过滤器如何工作的问题。

只需分别使用 valueOf()[0]、valueOf()[1]，其中 0 和 1 是内部数组的索引。这是 html，无需更改您的 getData 回调。

<table ng-table="tableParams" show-filter="true" class="table" >
    <tr ng-repeat="item in $data" height="10px">
        <td data-title="'Date'" filter="{ '0': 'text' }" sortable="valueOf()[0]">{{ item[0] | date: 'd MMM yyyy HH:mm' }}</td>
        <td data-title="'Count'" filter="{ '1': 'text' }" sortable="valueOf()[1]">{{ item[1] }}</td>
    </tr>
</table>

请注意，您不需要翻译来显示毫秒级的日期，因为其他 Angular 过滤器“日期”支持这一点。

另请参阅这篇以某种方式相关的帖子 https://stackoverflow.com/a/15858739/61577

日期过滤(来自字符串)

为了从日期开始过滤，您需要在 Controller 上过滤时使用自定义“comperator”函数作为第三个参数。像这样的事情就可以了

var dateComperator = function(obj, text) {
   var valueAsText = obj + '';
    if (valueAsText.length == 13) { // must be milliseconds.
      valueAsText = $filter('date')(obj, 'd MMM yyyy HH:mm');
    } 
    return !text || (obj && valueAsText.toLowerCase().indexOf(text.toLowerCase()) > -1);
};

然后在您的 Controller 上进行 getData 回调:

    getData: function($defer, params) {
        // use build-in angular filter
        var sortedData = params.sorting() ?
                            $filter('orderBy')($scope.tasksRunDataForTable, params.orderBy()) :
                            $scope.tasksRunDataForTable;
        var filterInfo = params.filter();
        var comparer = (filterInfo && filterInfo['0']) ? dateComparer : undefined;
        $log.log(angular.toJson(filterInfo))
        var orderedData = filterInfo ?
               $filter('filter')(sortedData, filterInfo, comparer) :
               sortedData;
        params.total(orderedData.length); // set total for recalc pagination
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }

更新:更新了解决过滤问题的答案。更新 2:更新了在同时搜索日期和计数时解决问题的答案。

这是完整的 plunker http://plnkr.co/edit/D2n7MdAfugXpKeKOGosL?p=preview

希望这对您有所帮助。