Alternative way to display hour in AM/PM format in a table row-wise per hour 12 AM to 11 PM in angular JS

Question

Html code

<div ng-app="myApp">
<div ng-controller="MyCtrl">
    <table>
        <tr ng-repeat="item in data">
            <td>{{item}}</td>
        </tr>
</table>
</div>
</div>

js file below :

var app=angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.data.push("12 AM"); 
    for (var i=1; i<12; i++) {
            $scope.data.push(i+" AM");
    }
    $scope.data.push("12 PM"); 
    for (var i=1; i<12; i++) {
            $scope.data.push(i+" PM");
   }
}

This works fine, but any alternative way to do this in AngularJS would be appreciated.

Answer 1

Is the item actually come from the server? If so, you should be using date filter to convert it to desired format. For example, {{ item | date : 'hh a' }} {{ item | date : 'hh a' }}

If, On the other hand, you just want to go through the hourly ticks (say, for the first column of the calendar) and for some reason you don't want to use existing calendar directive , then I guess, what you are doing is fine. Or you can create an array of JavaScript Dates ('... 01:00', '... 02:00', etc) and use filter in {{ }}