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

其中 Controller 中的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

请注意，它将比较字符串。它不会比较日期。您将必须处理 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
};