Slan Slan - 5 months ago 168
AngularJS Question

Display TimeSpan type Data in Angularjs Listing

Trying to show time in table but it shows me time in this 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}


while i want it to be displayed in this format

"12:13:20"


In Html file i does listing like this

<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 where i am initializing data

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 i am sending data to angular controller

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

I have just tried this and its solved my problem

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;
};