日期，没有适当的排序中Angular.js [英] dates not properly sorted in Angular.js

问题描述

我是比较新的Angular.js和时遇到的日期排列的一个问题。我看过网上的类似问题左右，但没有发现任何的是完全一样的味道。

I am relatively new to Angular.js and am having a problem with date sorting. I have looked around the web for similar issues, but haven't found any that are of quite the same flavor.

情况如下：

我得到一个数据从数据库（我想在一列标题排序表中显示）折戟，其中每个记录包含格式化为一个字符串的日期：

I am getting a data set back from the database (that I would like to display in a column-header sortable table), in which each record contains a date formatted as a string:

data = [
  {
    "name": "Test_1_Test",
    "creation_date": "8/2/2013 10:31:02 AM"
  },
  {
    "name": "Test_2_Test",
    "creation_date": "8/1/2013 9:12:32 AM"
  },
  {
    "name": "Test_3_Test",
    "creation_date": "9/13/2013 4:55:09 AM"
  }
]

此外，我又回到了一组列标题：

Additionally, I am getting back a set of column headers:

headers = [
  {
    "column": "name",
    "label": "Doc Name"
  },
  {
    "column": "creation_date",
    "label": "Create Date",
    "displayFormat": {
      "dateType": "medium"
    }
  }
]

使用NG重复指令（有没有麻烦）创建列标题：

Using an ng-repeat directive to create the column headers (no trouble there):

<th ng-repeat="column in smartviewColumns">
  <a href="" ng-click="sortBy($index)">
    {{column.label}}
  </a>
</th>

，其中在控制器中的sortBy功能如下：

where the sortBy function in the controller is as follows:

$scope.sortBy = function(index){
  if ($scope.sortColumn && $scope.sortColumn === $scope.columns[index]) {
    $scope.reverse = !$scope.reverse;
  }
  $scope.sortColumn = $scope.columns[index];
}

此外，使用嵌套纳克重复指令来创建该表中的数据行（跨各列）：

Additionally, using nested ng-repeat directives to create the data rows (across each column) in the table:

<tr ng-repeat="record in data | orderBy:sortColumn:reverse">
  <td ng-repeat="column in headers">
    <div ng-if="column.displayFormat && column.displayFormat.dateType">
      {{getDate(record[column]) | date:column.displayFormat.dateType}}
    </div>
    <div ng-if="!smartviewColumns[$index].displayFormat">
      {{record[smartviewColAttrs[$index]]}}
    </div>    
  </td>
</tr>

问题是，日期不正确排序。当我颠倒顺序，名单翻转，但错序仍然存在。我曾尝试不同格式的日期字符串，以及调用新的Date（CREATION_DATE），均无济于事。

The issue is that the dates do not sort properly. When I reverse the order, the list flips but the mis-ordering persists. I have tried formatting the date string differently, as well as calling new Date(creation_date), both to no avail.

小提琴呈现类似的症状

有其他人遇到这个问题？ （另外，我应该排除它时，问题仍然存在提到，我使用的是分页程序作为数据行二级过滤器，但即使）

Has anyone else experienced this issue? (Additionally, i should mention that i am using a paginator as a secondary filter on the data rows, but even when excluding it the behavior persists)

推荐答案

知道它会比较字符串。它不会比较日期。你将不得不应付日期对象。

be aware that it will compare string. It won't compare Dates. You will have to deal with Dates object.

下面是一本讲述这个。

下面是 vojtajina

下面是解决方案的一部分：

Here is part of the solution:

Main.prototype = {

    sort: function(item) {
        if (this.predicate == 'date') {
            return new Date(item.date);
        }
        return item[this.predicate];
    },

    sortBy: function(field) {
        if (this.predicate != field) {
            this.predicate = field;
            this.reverse = false;
        } else {
            this.reverse = !this.reverse;
        }
    },

    reverse: false
};

这篇关于日期，没有适当的排序中Angular.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！