日期未在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>

问题是日期没有正确排序.当我颠倒订单时,列表翻转但错误排序仍然存在.我尝试过不同地格式化日期字符串,以及调用新的Date(creation_date),两者都无济于事.

小提琴表现出类似的症状

还有其他人遇到过这个问题吗？(另外,我应该提到我使用paginator作为数据行的辅助过滤器,但即使排除它,行为仍然存在)

Answer 1

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

这是一个关于这个的讨论.

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