2015-04-01 2 views
0

Я хочу реализовать сортировку для своих полей таблицы. У меня есть одна колонка, показывающая время. Вот пример, который я попыталсяAngularjs сортировка по времени 24 часа

<tr><td ng-click="predicate = 'appointmentTime'; reverse=!reverse">AdmitTime</td></tr> 
    <tr ng-cloak ng-repeat='listItem in apptList | filterencounters:searchModel | orderBy:predicate:reverse' ng-class='rowClass(listItem)'> 
    <td>{{listItem.appointmentTime}}</td> 
    </tr> 

Приведенный выше код работает, но сортировка основана в AM & PM

enter image description here

Я хотел бы сортировать по 24hrs.

+0

Share код фильтра, чтобы проверить – mohamedrias

+0

вы не можете сортировать даты как этот угловатый рассматривать их как обычные строки не как дата. вы можете передать дату в 24-часовой системе из бэкэнд и отформатировать ее в желаемом формате во внешнем интерфейсе и показать –

+0

@mohamedrias, я включил код фильтра в свой вопрос – NNR

ответ

0

Лучшей практикой было бы хранить Date объекты, сортировать их, а затем конвертировать в свой формат с фильтром: {{ listItem.appointedTime | date : 'HH:mm a' }}.

1

Вот пример кода с пользовательского фильтра:

Я использовал moment.js для пользовательских сортировки здесь.

angular.module("app", []) 
 
.controller("Cont", function($scope){ 
 
    $scope.apptList = [{ 
 
time : "01:00 PM" 
 
    }, 
 
    { 
 
time : "02:05 PM" 
 
    }, 
 
    { 
 
time : "10:42 AM" 
 
    }, 
 
    { 
 
time : "10:44 AM" 
 
    }, 
 
    { 
 
time : "10:45 AM" 
 
    }]; 
 
}) 
 
.filter('customOrderBy', function() { 
 
    return function (arr, parameter) { 
 
return arr.sort(function(a, b) { 
 
    return moment(b.time, "hh:mm A").diff(moment(a.time, "hh:mm A")) > 0 ? -1 : 1; 
 
}); 
 
}; 
 
});
<html ng-app="app"> 
 
<head> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> 
 
    <script src="http://momentjs.com/downloads/moment.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body ng-controller="Cont"> 
 
<ul> 
 
    <li ng-repeat="app in apptList | customOrderBy">{{app.time}}</li> 
 
    </ul> 
 
</body> 
 
</html> 
 

+0

Я должен сделать это в угловом формате с использованием внешних js, таких как moment.js. В любом случае, спасибо за ваш ответ – NNR

+0

@NoOne Отлично, надеюсь, теперь у вас есть смысл. Вы можете просто изменить функцию сортировки и выполнить сравнение самостоятельно, чтобы получить желаемые результаты – mohamedrias

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