輸入一個數字並在AngularJS中以'hh：mm：ss'/ time格式顯示

Question

我在應用程序中執行的功能是，當我輸入一個特定數字時，它將以hh：mm：ss格式顯示並開始遞減計數。 輸入的數字將被視為分鍾，例如當我輸入2時，顯示為00:02:00，然后它將開始遞減計數。

 <body ng-app="mehmetcankerApp">
 <!--counterCtrl App Controller -->   
<div ng-controller="counterCtrl">
 <!--Angular Binding -->  
 <input type="number" ng-model="counter"/>
<p ng-model="format" ng-bind="counter"  id="numOfDozens"></p>
    <button ng-click="stop()">Stop</button>
    <button ng-click="countdown()">Start</button>     
</div>

整個代碼在以下plnker鏈接中： http ://plnkr.co/edit/Mzv6W9smmRkaDPU4cgVa?p=preview

Answer 1

您需要使用自定義過濾器和間隔：

 var app = angular.module('app', []); app.controller('counterCtrl', ['$scope', '$interval', function($scope, $interval) { $scope.minutes = 0; $scope.seconds = $scope.minutes * 60; $scope.$watch('minutes', function() { $scope.seconds = $scope.minutes * 60; }); $scope.countdown = function() { if ($scope.seconds <= 0) return; $scope.countdownInterval = $interval(function() { if ($scope.seconds <= 0) { $interval.cancel(countdownInterval); } $scope.seconds--; }, 1000); }; $scope.stop = function() { $interval.cancel($scope.countdownInterval); }; } ]); app.filter('secondsToDate', [ function() { return function(seconds) { return new Date(1970, 0, 1).setSeconds(seconds); }; } ])

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> <div ng-app="app"> <div ng-controller="counterCtrl"> <!--Angular Binding --> <input type="number" ng-model="minutes" /> <p id="numOfDozens">{{seconds | secondsToDate | date:'HH:mm:ss'}}</p> <button ng-click="stop()">Stop</button> <button ng-click="countdown()">Start</button> </div> </div>

Answer 2

工作演示

在這里您可以看到，我創建了一個函數來獲取帶有輸入文本（計數器）確切時間的采樣日期。

{{getMyTime() | date: 'HH:mm:ss'}}

getMyTime()將返回帶有正確時間的示例日期，並使用日期過濾器對其進行格式化。

 $scope.getMyTime = function(){
   var myTime = new Date(01,01,01);
   myTime.setMinutes($scope.counter);
   return myTime;
 }

希望這會幫助你。

請隨時對此提出任何疑問！

輸入一個數字並在AngularJS中以'hh：mm：ss'/ time格式顯示

問題描述

2 個解決方案

解決方案1
3 已采納 2016-02-02 06:22:59

解決方案2
1 2016-02-02 06:20:52

輸入一個數字並在AngularJS中以&#39;hh：mm：ss&#39;/ time格式顯示

問題描述

2 個解決方案

解決方案1 3 已采納 2016-02-02 06:22:59

解決方案2 1 2016-02-02 06:20:52

輸入一個數字並在AngularJS中以'hh：mm：ss'/ time格式顯示

解決方案1
3 已采納 2016-02-02 06:22:59

解決方案2
1 2016-02-02 06:20:52