2014-01-09 3 views
10

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

Использование директивы нг-повтора для создания заголовков столбцов (не troubl е есть):

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

Кроме того, используя вложенные директивы нг-повтор для создания строк данных (через каждый столбец) в таблице :

<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), причем безрезультатно.

Fiddle showing similar symptom

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

ответ

8

помните, что он будет сравнивать строку. Он не будет сравнивать Даты. Вам придется иметь дело с объектом 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 
}; 
+0

Спасибо за обратную связь. Это решение ограничено жестко закодированным значением ключа _date_. Мне нужно применить этот тип прототипа для любого столбца данных, заголовок которого содержит ключ _dateFormat_, но функция sort получает только элемент, который не содержит информацию заголовка.Может ли этот тип прототипирования выполняться в угловом модуле таким образом, чтобы быть в курсе $ scope и, следовательно, храниться там информация заголовка? Кажется, что если бы я мог использовать эту информацию, чтобы определить, нужен ли элемент для даты или нет. – Documental

0

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

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

только вам нужно всегда держите свою дату в таком же формате.

изменения

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/

Смежные вопросы