2017-03-23 26 views
0

私は値と分の小数点値を持っており、このフォーマットで時間に変換する必要があり、現在:56:01:0024時間以上AngularJS

私はこのコードを試してみました:

$scope.myTime = new Date(1970, 0, 1).setMinutes(3361); 

<input type="text" class="form-control" ng-model="myTime | date:'HH:mm:ss'"> 

をしかし、結果は私が期待ということではありません。8時01分00秒

+2

あなたはこれにMomentJSを使用することができます:https://momentjs.com/docs/#/durations/ –

+0

営業時間が24時間を超えることが必要なため、あなたの通常の日付は機能しません。 – mehulmpt

+0

はい、これは私が必要な問題です時間を使うためのヒント> 24 –

答えて

4

を$フィルターを追加また、以下を使用してスコープを変更してみてください。

カスタムフィルタ(ここではangular official guide)を作成し、必要な形式で結果を作成することができます。

たとえば、moment.duration(3361, 'minutes');を使用してmoment durationを作成し、次にmoment-duration-formatを使用して、HH:mm:ss形式で期間を取得することができます。ここで

完全なライブ例:

angular.module('MyApp', []) 
 
.filter('durationFormat', function() { 
 
    return function(input) { 
 
    input = input || ''; 
 
    var out = ''; 
 
    var dur = moment.duration(input, 'minutes'); 
 
    return dur.format('HH:mm:ss'); 
 
    }; 
 
}) 
 
.controller('AppCtrl', function($scope) { 
 
    $scope.myTime = 3361; 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script> 
 

 
<div ng-app="MyApp" ng-controller="AppCtrl"> 
 
    {{ myTime | durationFormat }} 
 
</div>


同じ出力を得るための別の方法は、瞬間の時間を使用して表示するためのフィルタを持っているangular-moment-duration-formatを使用しています。期間はamdCreateを指定して'minutes'単位を指定して作成し、amdFormatを使用してフォーマットすることができます。ここで

例:

angular.module('MyApp', ['angularDurationFormat']) 
 
.controller('AppCtrl', function($scope) { 
 
    $scope.myTime = 3361; 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script> 
 
<script src="https://cdn.rawgit.com/vin-car/angular-moment-duration-format/0.1.0/angular-moment-duration-format.min.js"></script> 
 

 
<div ng-app="MyApp" ng-controller="AppCtrl"> 
 
    {{ myTime | amdCreate:'minutes' | amdFormat:'HH:mm:ss' }} 
 
</div>

PS。私はangular-moment-duration-formatの作成者です。

1

は何のビルトインAngularJS DATはありませんあなたが表示しようとしているものを達成するe/timeフィルター

しかし、あなたが探しているものを達成するcustom AngularJS filterを作成することはできます。

1

% 60分を省くことができます。その後、単純に60を減算して分けて時間数を取得することができます。

function minutesToHours(min) { 
 
    var minutes = min % 60; 
 
    var hours = (min-minutes)/60; 
 
    minutes = minutes < 10 ? '0' + minutes : minutes; 
 
    return hours+':'+minutes+':00'; 
 
} 
 

 
console.log(minutesToHours(3361));

1

私はあなたが角度dateフィルタを使用して必要なものをacheiveすることができないことを恐れ、あなたのコントローラに

$scope.myTime = $filter('date')(new Date(1970, 0, 1).setMinutes(3361), 'HH:mm:ss'); 
関連する問題