Angular.js格式化模板中的分钟数

Question

在Angular.js中,我将一个数字传递给我的视图,这是一段时间内的时间长度.

<p>{{time.minutes}}</p>

我想格式化这个值,以便以小时和分钟显示,例如(6小时42分钟).我尝试使用一些内置的日期函数但无法到达任何地方.在将控制器传递给视图之前在控制器中执行此类逻辑是否更好？或者在视图中是否可以？

Answer 1

正如Whisher所提到的,过滤器更适合更改html输出的格式.

我不久前创建了一个过滤器,它可以根据时间(小时,分钟,秒)的度量单位将给定时间值转换为适合其用户品味的特定格式.

DEMO

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

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's 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>