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>

Answer 2

这个怎么样：

一线解决方案

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

演示1 Fiddle

建议的解决方案

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>

演示2 Fiddle

测试：

minutes = 29 ->  Output '29m'
minutes = 60 ->  Output '1h'
minutes = 123 -> Output '2h 3m'

更多建议方式（指令）

指令

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>

演示3 Fiddle

Answer 3

(function () {
    'use strict';

    angular
        .module('module_name')
        .filter('minutesToDateTime', minutesToDateTime);

    function minutesToDateTime() {
        return function(minutes) {
            return new Date(1970, 0, 1).setMinutes(minutes);
        };
    }
})();

{{minutes | minutesToDateTime | date:'HH:mm:ss'}}

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

3 个答案: