Daten nicht richtig in Angular.js sortiert

Question

Ich bin relativ neu in Angular.js und habe ein Problem mit der Sortierung nach Datum. Ich habe mich im Internet nach ähnlichen Themen umgesehen, habe aber keine gefunden, die von ganz ähnlichem Geschmack sind.

Die Situation ist wie folgt:

Ich bin eine Daten zurück aus der Datenbank gesetzt bekommen (die ich möchte in einer Spaltenkopf sortierbare Tabelle anzuzeigen), in der jeder Datensatz ein Datum als eine formatierte enthält string:

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

Zusätzlich erhalte ich eine Reihe von Spaltenüberschriften zurück:

headers = [ 
    { 
    "column": "name", 
    "label": "Doc Name" 
    }, 
    { 
    "column": "creation_date", 
    "label": "Create Date", 
    "displayFormat": { 
     "dateType": "medium" 
    } 
    } 
] 

eine ng-Repeat-Richtlinie Mit Hilfe der Spaltenüberschriften (kein troubl erstellen e dort):

<th ng-repeat="column in smartviewColumns"> 
    <a href="" ng-click="sortBy($index)"> 
    {{column.label}} 
    </a> 
</th> 

wo die sortBy Funktion in der Steuerung ist wie folgt:

$scope.sortBy = function(index){ 
    if ($scope.sortColumn && $scope.sortColumn === $scope.columns[index]) { 
    $scope.reverse = !$scope.reverse; 
    } 
    $scope.sortColumn = $scope.columns[index]; 
} 

Zusätzlich nested ng-repeat-Richtlinien unter Verwendung der Datenzeilen zu erzeugen (in jeder Spalte) in der Tabelle :

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

Das Problem ist, dass die Daten nicht richtig sortieren. Wenn ich die Reihenfolge umwende, wird die Liste umgeblättert, aber die Fehlordnung bleibt bestehen. Ich habe versucht, die Datumsstring anders zu formatieren, sowie neues Datum (creation_date), beide vergebens.

Fiddle showing similar symptom

Hat jemand dieses Problem erfahren? (Zusätzlich sollte ich erwähnen, dass ich einen Paginator als sekundären Filter für die Datenzeilen verwende, aber auch wenn er ausgeschlossen wird, bleibt das Verhalten bestehen)

Answer 1

Beachten Sie, dass die Zeichenfolge verglichen wird. Es werden keine Daten verglichen. Sie müssen sich mit dem Dates-Objekt befassen.

Hier ist ein Gespräch über this.

Hier ist die Lösung von vojtajina

Hier ein Teil der Lösung ist:

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

Wenn Sie nur eine Bestellung aufgeben möchten aufsteigend oder absteigend, einfach

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

Answer 3

nur müssen Sie halte dein Date immer in einem ähnlichen Format.

Änderung

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

prüfen Geige

http://jsfiddle.net/HrGdt/28/