Jak sortować elementy według daty w inteligentnym stole

Question

Jak sortować dane według daty w tabeli inteligentnej? W przypadku st-sort nie jest tak dobrze.

<table st-table="displayedCollection" st-safe-src="playerCollection" class="table table-hover"> 
     <thead> 
     <tr> 
      <th st-sort="id" class="hover">Id</th> 
      <th st-sort="firstname" class="hover">Jméno</th> 
      <th st-sort="lastname" class="hover">Příjmení</th> 
      <th st-sort="registrationDate" class="hover">Datum registrace</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="player in displayedCollection"> 
      <td class="hover">{{player.id}}</td> 
      <td class="hover">{{player.firstname}}</td> 
      <td class="hover">{{player.lastname}}</td> 
      <td class="hover">{{player.registrationDate}}</td> 
     </tr> 
     </tbody> 
    </table> 

Dzięki za odpowiedzi.

Answer 1

Dodaj zamówienie na swojej ng-repeat tak:

<tr ng-repeat="player in displayedCollection | orderBy:'registrationDate'"> 
    <td class="hover">{{player.id}}</td> 
    <td class="hover">{{player.firstname}}</td> 
    <td class="hover">{{player.lastname}}</td> 
    <td class="hover">{{player.registrationDate}}</td> 
</tr> 

do sortowania onclick, można dodać zmienną do zakresu, który określa sposób sortowania i używane, że na orderBy na ng-repeat.

coś takiego:

<table st-table="displayedCollection" st-safe-src="playerCollection" class="table table-hover"> 
    <thead> 
    <tr> 
     <th st-sort="id" class="hover"><a href="" ng-click="predicate = 'id'; reverse=false">Id</a></th> 
     <th st-sort="firstname" class="hover"><a href="" ng-click="predicate = 'firstname'; reverse=false">Jméno</a></th> 
     <th st-sort="lastname" class="hover"><a href="" ng-click="predicate = 'lastname'; reverse=false">Příjmení</a></th> 
     <th st-sort="registrationDate" class="hover"><a href="" ng-click="predicate = 'registrationDate'; reverse=false">Datum registrace</a></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="player in displayedCollection | orderBy:predicate:reverse"> 
     <td class="hover">{{player.id}}</td> 
     <td class="hover">{{player.firstname}}</td> 
     <td class="hover">{{player.lastname}}</td> 
     <td class="hover">{{player.registrationDate}}</td> 
    </tr> 
    </tbody> 
</table> 

stworzyłem plunker do tego. Zobaczysz, jeśli klikniesz nagłówek kolumny, posortujesz tabelę według tej kolumny. Mam nadzieję, że to pomoże.

http://plnkr.co/edit/pAJ3PpRwVk7PuTmoMjsr?p=preview

Answer 2

powinno normalnie działać (por strona dokumentacja). Jednak jeśli data rejestracji jest data ciąg należy użyć getter, aby powrócić do wersji data wynikowego, w przeciwnym razie będziesz miał kolejności alfanumerycznej

w kontrolerze

$scope.getters = { 
    registrationDate:function(row) { 
     return new Date(row.registrationDate); 
    } 
} 

więc można powiązać nagłówek do tego gettera

<th st-sort="getters.registrationDate">Datum registrace</th> 

Answer 3

Dodam kolejne możliwe rozwiązanie związane z odpowiedzią @laurent. Jego rozwiązanie nie działa w moim przypadku tak zmieniłem nieco getter:

$scope.getters = { 
    registrationDate:function(row) { 
     return (new Date(row.registrationDate)).getTime(); 
    } 
} 

getTime() zwraca liczbę milisekund od 1970/01/01, więc kolumna zostaną uporządkowane według liczby zamiast terminu (IT nie działało w moim przypadku i nie zrozumiałem dlaczego), a wynik jest taki sam.