Question

我想首先说明我对Angular的经验很少，因为这是我使用它的第一个项目。

在控制器中，我进行一次AJAX调用，返回一个json。其中一个json对象是以下格式的分钟：1385

我想将此数字转换为使用Angular过滤器的8d 15h 0m

我想知道这怎么可能？

Answer 1

<强>答案

是。它是100％可能的。创建如下所示的过滤器并添加您的特定日期计算过滤器里面。

如何进行日期计算：

就实际日期计算而言，它只不过是常规的JavaScript逻辑。这里有几个选项：

原生Date()对象将公开各种.getSomething() 功能
MomentJS也很好，因为它是专为这些事情设计的图书馆
手动计算

如果您想知道如何手动执行此操作。从概念上讲，计算方法如下所示......这个想法是一个滚动计算，你得到更高的时间单位，然后继续从下一次计算中减去它，带着剩余的时间。

Input = Original Minute value     
Days = Input / 60 [mins in an hour] / 24 [total hours in day]  
Hours = Leftover / 60 [mins in an hour] 
Mins = Leftover

对SO的快速搜索产生了此solution以进行自定义的排序计算。我在下面的示例中使用了链接的calculation。

示例

Answer 2

我建议稍微缩短版本作为替代，使用new Date()对象并使用预定义方法单独获取其组件。它的工作方式相同，使用的计算量更少。

这是一个演示：

var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {});
app.filter('myDateFilter', ['$filter',
  function($filter) {
    return function(input) {
      var inp = new Date(0, 0, 0, 0, input, 0); // assumes minutes as an input
      var m = inp.getMinutes();
      var h = inp.getHours();
      var d = inp.getDay();

      return d + 'd ' + h + 'h ' + m + 'm ';
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>

<div ng-app="app" ng-controller="MainCtrl">
  1385 minutes = {{ 1385 | myDateFilter }}
</div>

Answer 3

这里是您可以复制/粘贴角度为6+的管道。我也使它更加健壮：

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Format a value in minutes as [x(d| days)] y(h| hours) z(m| minutes)
 *
 * Usage:
 *  value | hoursMinutes // 0d 3h 20m
 *  value | hoursMinutes: 'long':false // 3 hours 20 minutes
 */
@Pipe({
  name: 'hoursMinutes'
})
export class HoursMinutesPipe implements PipeTransform {
  transform(minutes: number, format = 'short', includeDays = true): any {
    let formatted = '';
    // set minutes to seconds
    let seconds = minutes * 60;

    // calculate (and subtract) whole days
    let days = 0;
    if (includeDays) {
      days = Math.floor(seconds / 86400);
      seconds -= days * 86400;
      formatted = `${days}d `;
    }

    // calculate (and subtract) whole hours
    const hours = Math.floor(seconds / 3600) % 24;
    seconds -= hours * 3600;

    // calculate (and subtract) whole minutes
    const min = Math.floor(seconds / 60) % 60;

    formatted += `${hours}h ${min}m`;

    if ('long' === format) {
      formatted = formatted.replace('d', ' days');
      formatted = formatted.replace('h', ' hours');
      formatted = formatted.replace('m', ' minutes');
    }

    return formatted;
  }
}

AngularJS使用过滤器将分钟转换为天，小时和分钟

3 个答案: