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），两者都无济于事。

Fiddle showing similar symptom

还有其他人遇到过此问题吗？（另外，我应该提一下，我使用paginator作为数据行的辅助过滤器，但即使排除它，行为仍然存在）

Answer 1

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

以下是关于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
};

Answer 2

如果您只想订购Ascending或Descending，只需

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

Answer 3

只需要始终以类似的格式保存日期。

变化

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/

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

3 个答案: