Angularjs用过滤器将几分钟转换为天，小时和分钟

我想开始说我对Angular的经验很少，因为这是我从事它使用的第一个项目。

在控制器中，我进行了一个返回JSON的Ajax调用。JSON对象之一是以下格式分钟：1385

我想将此数字转换为类似的东西：使用Angular Filter

8d 15h 0m

我想知道这是怎么可能的？

答案

是。这是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

快速搜索，因此得出了该解决方案以进行自定义计算。我在下面的样本上使用了链接的计算。

示例

var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {})
  .filter('myDateFilter', ['$filter',
    function($filter) {
      return function(input) {
        // set minutes to seconds
        var seconds = input * 60
        // calculate (and subtract) whole days
        var days = Math.floor(seconds / 86400);
        seconds -= days * 86400;
        // calculate (and subtract) whole hours
        var hours = Math.floor(seconds / 3600) % 24;
        seconds -= hours * 3600;
        // calculate (and subtract) whole minutes
        var minutes = Math.floor(seconds / 60) % 60;
        return days + 'd ' + hours + 'h ' + minutes + 'm ';
      }
    }
  ]);

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

我建议使用替代的版本，该版本使用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>

这是一个管道，您可以复制/粘贴到Angular 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;
  }
}

相关内容

最新更新

热门标签：