Angular.js format in template
In Angular.js I am passing a number to my view, which takes a few minutes to complete.
<p>{{time.minutes}}</p>
I want to format this value so that it is displayed in hours and minutes, for example (6h 42m). I tried using some built-in date functions but couldn't get anywhere. Is it better to do this logic in the controller before passing it to the view or is it possible in the view?
source to share
As Whisher mentioned, the filter is more suitable for changing the html output format.
I recently created a filter that can convert a given time value based on a time unit (hours, minutes, seconds) into a specific format that suits the taste of its user.
JAVASCRIPT
.filter('time', function() {
var conversions = {
'ss': angular.identity,
'mm': function(value) { return value * 60; },
'hh': function(value) { return value * 3600; }
};
var padding = function(value, length) {
var zeroes = length - ('' + (value)).length,
pad = '';
while(zeroes-- > 0) pad += '0';
return pad + value;
};
return function(value, unit, format, isPadded) {
var totalSeconds = conversions[unit || 'ss'](value),
hh = Math.floor(totalSeconds / 3600),
mm = Math.floor((totalSeconds % 3600) / 60),
ss = totalSeconds % 60;
format = format || 'hh:mm:ss';
isPadded = angular.isDefined(isPadded)? isPadded: true;
hh = isPadded? padding(hh, 2): hh;
mm = isPadded? padding(mm, 2): mm;
ss = isPadded? padding(ss, 2): ss;
return format.replace(/hh/, hh).replace(/mm/, mm).replace(/ss/, ss);
};
});
USING HTML
<!--
65 minutes converted to hh:mm:ss format which is the default format = 01:05:00
The parameter 'mm' suggests the the time value(65) is a unit of measure in minutes.
-->
<pre>{{65 | time:'mm'}}</pre>
<!--
65 minutes converted to the OP desired output = 1h 5m
the parameter 'hhh mmm' suggests the format of the output desired
by the OP, the "hh" and "mm" text are replace with the hour value and
the minute value
the last parameter which is a boolean value suggests that the hour(hh), minute(mm),
second(ss) values are not padded. E.G. hour = 2 output would be 02. By default, this
parameter is set to true.
-->
<pre>{{65 | time:'mm':'hhh mmm':false}}</pre>
source to share
How about this:
One line solution
<pre>
with hours: {{ (time.minutes<60) ?
(time.minutes) + 'm' : (time.minutes%60==0) ?
(time.minutes-time.minutes%60)/60 + 'h' :
((time.minutes-time.minutes%60)/60 + 'h' + ' ' + time.minutes%60 + 'm') }}
</pre>
Demo 1 Fiddle
Proposed solution
Js
if($scope.time.minutes < 60){
$scope.time.result = ($scope.time.minutes) + 'm';
}
else if($scope.time.minutes%60==0){
$scope.time.result = ($scope.time.minutes-$scope.time.minutes%60)/60 + 'h';
}
else{
$scope.time.result = (($scope.time.minutes-$scope.time.minutes%60)/60 + 'h' + ' ' + $scope.time.minutes%60 + 'm');
}
Html
<pre>with hours: {{ time.result}}</pre>
Demo 2 Fiddle
Test:
minutes = 29 -> Output '29m'
minutes = 60 -> Output '1h'
minutes = 123 -> Output '2h 3m'
Proposed method (directive)
Directive
app.directive('myHours', function () {
return {
restrict: 'E',
replace: true,
scope: {
myData: '='
},
template: '<pre>with hours: {{myData.result}}</pre>',
link: function (scope, elem, attrs) {
var calc = function (time) {
if (time < 60) {
return (time) + 'm';
} else if (time % 60 == 0) {
return (time - time % 60) / 60 + 'h';
} else {
return ((time - time % 60) / 60 + 'h' + ' ' + time % 60 + 'm');
}
}
scope.myData.result = calc(scope.myData.minutes);
}
};
});
Html
<my-hours my-data="time"></my-hours>
Demo 3 Fiddle
source to share