输入一个数字并在 AngularJS 中以 'hh:mm:ss' /time 格式显示答案

【问题标题】：Input a number and showed it in 'hh:mm:ss' /time format in AngularJS输入一个数字并在 AngularJS 中以 'hh:mm:ss' /time 格式显示
【发布时间】：2016-02-02 06:01:10
【问题描述】：

我正在我的应用程序中制作功能，当我输入特定数字时，它将以 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

【问题讨论】：

标签： javascript angularjs countdowntimer angularjs-ng-model ng-bind

【解决方案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>

【讨论】：

【解决方案2】：

Working Demo

在这里您可以看到，我创建了一个函数来获取具有输入文本（计数器）的确切时间的示例日期。

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

getMyTime() 将返回具有正确时间的示例日期，并使用日期过滤器对其进行格式化。

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

希望这会对你有所帮助。

如有任何疑问，请随时提出！！！

【讨论】：