Angular time formatting incorrectly - angularjs

Question

I am getting the following JSON back from a service:
{
"DailyEventCaseID": 1,
"LocID": "LA ",
"CourtRoom": "9",
"CaseID": 3,
"EventDate": "2015-09-14T00:00:00",
"SortTime": "08:30",
"SeqNumber": 1,
"StatusID": null,
"Case": {
"CaseID": 3,
"CaseNumber": "BP118652",
"DivisionCode": "PR",
"District": "LA ",
"CaseTitle": "KRAUS, MARGARITH - TRUST DTD 07/07/98"
},
"Status": null,
"Events": [
{
"EventID": 9,
"DailyEventCaseID": 1,
"EntityNumber": "0020",
"EventName": "INSTRUCTIONS",
"DailyEventCase": null
}
]
}
I want the field SortTime to display as 8:30 am so I have it in my view as:
{{case.SortTime | date: 'h:mm a'}}
It still just shows as 8:30 and not 8:30 am.
What am I doing wrong?

Answer 1

In your code, case.SortTime is not a date object. It is just a string. So date filter is not applied.
Method 1:
Assuming that you need only time regardless date, I suggest you this method. But it is not a good practice.
In your controller, you can overwrite case.SortTime as
timeParams = $scope.case.SortTime.split(':')
$scope.case.SortTime = new Date(0,0,0,timeParams[0],timeParams[1])
Now {{case.SortTime | date: 'h:mm a'}} will give you date with AM/PM.
See http://jsfiddle.net/radik305411/dys6atmj/ for help.
Method 2: Create a custom filter.
var app = angular.module('app', []);
app.filter('timeFilter', function () {
return function (sortTime) {
var timeParams = sortTime.split(":");
timeParams[2] = "AM"
if(timeParams[0] >= 12){
timeParams[0] -= 12;
timeParams[2] = "PM"
}
return timeParams[0]+':'+timeParams[1]+' '+timeParams[2]
};
});
Now {{case.SortTime | timeFilter }} will give the result you need.