Anzeige Span Typ Daten in AngularJS Listing

Question

Den Versuch, Zeit in der Tabelle zu zeigen, aber es zeigt mir Zeit in diesem Format

{"Hours":16,"Minutes":8,"Seconds":45,"Milliseconds":0,"Ticks":581250000000,"Days":0,"TotalDays":0.6727430555555556,"TotalHours":16.145833333333332,"TotalMilliseconds":58125000,"TotalMinutes":968.75,"TotalSeconds":58125} 

, während ich es will

"12:13:20" 

in Html in diesem Format angezeigt werden Datei i ist die Auflistung wie diese

<table> 
    <thead> 
     <tr> 
      <th>Start Time</th> 
      <th>End Time</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="item in Festivals"> 
      <td>{{item.StartTime}}</td> 
      <td>{{item.EndTime}}</td> 
     </tr> 
    </tbody> 
</table> 

Angular Controller-Code, wo ich Daten am Initialisierung

var app = angular.module('myApp'); 

app.controller('SeasonCtrl', [ 
    '$scope', '$http', 'seasonService', function ($scope, $http, seasonService) { 

     $scope.Seasons = []; 

     seasonService.GetAllSeasons = function() { 
      seasonService.getSeasons().success(function (data) { 
       $scope.Seasons = data.data; 
      }) 
     } 

     seasonService.GetAllSeasons(); 

    } 
]); 

C# Code Ich bin Daten Winkelregler

public JsonResult GetAllSeasons() 
{ 
    var data = _seasonManager.AllSeasons(); 
    if (data != null) 
    { 
     var list = data.Select(r => new 
     { 
      r.StartTime, 
      r.EndTime 
     }); 

     return Json(new { data = list }, JsonRequestBehavior.AllowGet); 
    } 
    return null; 
} 

Answer 1

Ich habe das gerade versucht, und seine mein Problem gelöst

in Html

<table> 
    <thead> 
     <tr> 
      <th>Start Time</th> 
      <th>End Time</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="item in Festivals"> 
      <td ng-bind='timeFunction(item.StartTime)'></td> 
<td ng-bind='timeFunction(item.EndTime)'></td> 
     </tr> 
    </tbody> 
</table> 

In Angular-Controller

$scope.timeFunction = function (timeObj) { 
     var min = timeObj.Minutes < 10 ? "0" + timeObj.Minutes : timeObj.Minutes; 
     var sec = timeObj.Seconds < 10 ? "0" + timeObj.Seconds : timeObj.Seconds; 
     var hour = timeObj.Hours < 10 ? "0" + timeObj.Hours : timeObj.Hours; 
     return hour + ':' + min + ':' + sec; 
}; 

Answer 2

Senden Sie können das date Filter in Angular Datetime anzuzeigen formatiert:

In HTML:

<p>{{mydate | date:'H:mm:ss'}}</p> 

In JS:

Answer 3

Diese Lösung einen Filter und Moment.js verwendet.

In JS:

angular.module('app') 
    .filter('showTimeSpan', function() { 
     return function (timeObj, format) { 
      return moment(timeObj, "HH:mm").format(format); 
     }; 
    }); 

In HTML:

<p>{{activity.startTime | showTimeSpan:"hh:mm a"}}</p>