AngularJS + MomentJS Filter
Using MomentJS to format date
HTML
<script src="https://raw.github.com/timrwood/moment/1.7.2/min/moment.min.js"></script>
<div ng-app="miniapp">
<div ng-controller="Ctrl">
<table border='1'>
<tr >
<th ng-click="sorting('sno')" ng-class="sortClass('sno')">Timestamp</th>
</tr>
<tr ng-repeat="item in items| orderBy:column:reverse ">
<td>{{item | date:'h:mma'}}
</td>
</tr>
</table>
</div>
</div>
CSS
/*table */
table{
border-collapse: collapse;
}
table th,table td{
padding: 3px;
}
table th:hover{
cursor: pointer;
}
.arrow-down:after,.arrow-up:after{
content: ' ';
position: relative;
left: 2px;
border: 8px solid transparent;
}
.arrow-down:after{
top: 10px;
border-top-color: black;
}
.arrow-up:after{
bottom: 15px;
border-bottom-color: black;
}
.arrow-down,.arrow-up{
padding-right: 10px;
}
JavaScript
var $scope;
var app = angular.module('miniapp', []).filter('moment', function() {
return function(dateString, format) {
return moment(dateString).format(format);
};
});
function Ctrl($scope) {
$scope.reverse = false;
$scope.column = 'sno';
var unixTime = new Date();
$scope.currentUnixTime = unixTime;
console.log($scope.currentUnixTime);
$scope.items = [1318781876,1318781876,1318781876,1318781876,1318781876];
$scope.sorting = function() {
if($scope.reverse == '') {
$scope.reverse = true;
} else {
$scope.reverse = !$scope.reverse;
}
}
// remove and change class
$scope.sortClass = function(col){
if($scope.column == col ){
if($scope.reverse){
return 'arrow-down';
}else{
return 'arrow-up';
}
}else{
return '';
}
}
}