Даты не отсортированы должным образом в Angular.js

Я относительно новичок в 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>

Проблема заключается в том, что даты не сортируются должным образом. Когда я меняю порядок, список переворачивается, но неправильное упорядочение сохраняется. Я пробовал форматировать строку даты по-разному, а также вызывать новую дату (create_date), причем безрезультатно.

Скрипка, показывающая похожие симптомы

Кто-нибудь еще испытал эту проблему? (Кроме того, я должен упомянуть, что я использую paginator как вторичный фильтр в строках данных, но даже при исключении его поведение сохраняется)

Ответ 1

помните, что он будет сравнивать строку. Он не будет сравнивать Даты. Вам придется иметь дело с объектом Dates.

Вот о этом.

Вот решение от 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
};

Ответ 2

Если вы хотите просто заказать по возрастанию или по убыванию, просто

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

Ответ 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/