Angular.js 中的日期未正确排序

Question

我对 Angular.js 比较陌生，并且在日期排序方面遇到了问题。我在网上搜索了类似的问题，但没有发现任何具有相同风格的问题。

情况如下：

我正在从数据库中取回一个数据集（我想在列标题可排序表中显示该数据集），其中每条记录都包含一个格式化为字符串的日期：

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"
  }
]

另外，我得到了一组列标题：

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

使用 ng-repeat 指令创建列标题（没有问题）：

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

其中控制器中的sortBy函数如下：

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

此外，使用嵌套的 ng-repeat 指令在表中创建数据行（跨每列）：

<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>

问题是日期排序不正确。当我颠倒顺序时，列表会翻转，但错误排序仍然存在。我尝试过以不同方式格式化日期字符串，以及调用 new Date(creation_date)，均无济于事。

Fiddle showing similar symptom

还有其他人遇到过这个问题吗？ （另外，我应该提到我正在使用分页器作为数据行的辅助过滤器，但即使将其排除在外，行为仍然存在）

Answer 1

只是您需要始终保持日期格式相似。

改变

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

检查小提琴更新

http://jsfiddle.net/HrGdt/28/

Answer 2

如果您只想订购升序或降序，只需

<tr ng-repeat="record in data | orderBy:record.creation_date">
    <td>{{record.name}}</td>
</tr>

Answer 3

注意它会比较字符串。它不会比较日期。您将不得不处理 Dates 对象。

这里是关于this的讨论。

这是vojtajina的解决方案

这是解决方案的一部分：

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
};