Angular.js：秒到 HH:mm:ss 过滤器答案

【问题标题】：Angular.js: Seconds to HH:mm:ss filterAngular.js：秒到 HH:mm:ss 过滤器
【发布时间】：2015-04-08 07:05:25
【问题描述】：

我有一个秒数，例如 713 秒。如何实现一个 Angular.js 过滤器，将这 713 秒转换为 HH:mm:ss 格式？在这种情况下，应该是 00:11:53

<div>
  {{ 713 | secondsToHHMMSS }} <!-- Should output 00:11:53 -->
</div>

【问题讨论】：

标签： javascript angularjs date angularjs-filter

【解决方案1】：

试试这样的：

app.filter('secondsToDateTime', [function() {
    return function(seconds) {
        return new Date(1970, 0, 1).setSeconds(seconds);
    };
}])

html:

<b>{{seconds | secondsToDateTime | date:'HH:mm:ss'}}</b>

Demo

【讨论】：

2 年后 -> 依然优雅
时间在互联网上并不重要。这个答案帮助了我。谢谢。

【解决方案2】：

manzapanza 的答案仅在秒数小于 86400（1 天）时才有效。日期对象需要完全为零。另外，最好返回实际的日期对象，这样 angularjs 就不必再做一次了。

app.filter('secondsToDateTime', function() {
    return function(seconds) {
        var d = new Date(0,0,0,0,0,0,0);
        d.setSeconds(seconds);
        return d;
    };
});

和

<b>{{seconds | secondsToDateTime | date:'HH:mm:ss'}}</b>

编辑：如果您希望小时数超过 24 小时而不换行到天数，最好不要使用日期：

app.filter('secondsToTime', function() {

    function padTime(t) {
        return t < 10 ? "0"+t : t;
    }

    return function(_seconds) {
        if (typeof _seconds !== "number" || _seconds < 0)
            return "00:00:00";

        var hours = Math.floor(_seconds / 3600),
            minutes = Math.floor((_seconds % 3600) / 60),
            seconds = Math.floor(_seconds % 60);

        return padTime(hours) + ":" + padTime(minutes) + ":" + padTime(seconds);
    };
});

和

<b>{{seconds | secondsToTime}}</b>

【讨论】：

这里的“应用程序”是什么？在app.filter，我们应该把过滤器准确地放在哪里？
@DanyY app 是你的模块： var app = angular.module('myapp', []);

【解决方案3】：

试试这个：

app.filter('secondsToHHmmss', function($filter) {
    return function(seconds) {
        return $filter('date')(new Date(0, 0, 0).setSeconds(seconds), 'HH:mm:ss');
    };
})

html:

<b>{{seconds | secondsToHHmmss}}</b>

【讨论】：

我需要删除 [ ] 来完成这项工作，并将秒除以 1000，因为我正在处理毫秒
谢谢。刚刚修改。

【解决方案4】：

app.filter('formatTimer', function () {
return function (input) {
    function z(n) { return (n < 10 ? '0' : '') + n; }
    var seconds = input % 60;
    var minutes = Math.floor(input % 3600 / 60);
    var hours = Math.floor(input / 3600);
    return (z(hours) + ':' + z(minutes) + ':' + z(seconds));
};

将输出：02:04:14

【讨论】：

【解决方案5】：

我认为自定义过滤器没有必要

<b>{{hours}}{{seconds | date:':mm:ss'}}</b>

function Scoper($scope) {
    $scope.seconds = '79000';
    $scope.hours = parseInt($scope.seconds / 3600);
}

【讨论】：

自定义过滤器可能不是必需的，但是当您在不同的页面上需要此逻辑时，拥有过滤器或指令的最少额外时间投资就会得到回报。你可以把它藏在根作用域上，但这是你应该忽略的另一个代码味道。

【解决方案6】：

@manzapanza 解决了几天：

  $scope.duration_for = function(seconds){
    if(!seconds) return
    var duration = new Date(1970, 0, 1).setSeconds(seconds)

    var mask = 'HH:mm'
    if(seconds >= 86400){
      mask = 'd days,' + mask
    }

    return $filter('date')(duration, mask);
  }

在视图中：

{{duration_for(100500)}}

【讨论】：