Angular jsでcountDownを作成します。これは私のコードです:
HTMLファイル
<div ng-app ng-controller = "countController"> {{countDown}} <div>
jsファイル
function countController($scope){
$scope.countDown = 10;
var timer = setInterval(function(){$scope.countDown--; console.log($scope.countDown)},1000);
}
console.logで機能しますが、カウントダウンがありますが、{{countdown}}更新では、私を助けてくれませんか?ありがとう!
こちらの例をご覧ください。カウントアップの簡単な例です!カウントダウンを作成するために簡単に変更できると思います。
http://jsfiddle.net/ganarajpr/LQGE2/
function AlbumCtrl($scope,$timeout) {
$scope.counter = 0;
$scope.onTimeout = function(){
$scope.counter++;
mytimeout = $timeout($scope.onTimeout,1000);
}
var mytimeout = $timeout($scope.onTimeout,1000);
$scope.stop = function(){
$timeout.cancel(mytimeout);
}
}
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc11.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
</head>
<body>
<div ng-controller="AlbumCtrl">
{{counter}}
<button ng-click="stop()">Stop</button>
</div>
</body>
</html>
バージョン1.3以降、モジュールngにサービスがあります:$interval
function countController($scope, $interval){
$scope.countDown = 10;
$interval(function(){console.log($scope.countDown--)},1000,0);
}
注意して使用してください:
注:このサービスによって作成された間隔は、終了したら明示的に破棄する必要があります。特に、コントローラーのスコープまたはディレクティブの要素が破棄されても、自動的には破棄されません。これを考慮に入れ、適切なタイミングで間隔を常にキャンセルするようにしてください。これを行う方法とタイミングの詳細については、以下の例を参照してください。
From: Angularの公式ドキュメント 。
angularフレームワークの外部からangular式を実行するときは、 $ scope。$ apply() を使用する必要があります。
function countController($scope){
$scope.countDown = 10;
var timer = setInterval(function(){
$scope.countDown--;
$scope.$apply();
console.log($scope.countDown);
}, 1000);
}
停止と再開の機能を表示するようにganarajの回答を更新し、angular jsフィルターを追加してカウントダウンタイマーをフォーマットしました
コントローラーコード
'use strict';
var myApp = angular.module('myApp', []);
myApp.controller('AlbumCtrl', function($scope,$timeout) {
$scope.counter = 0;
$scope.stopped = false;
$scope.buttonText='Stop';
$scope.onTimeout = function(){
$scope.counter++;
mytimeout = $timeout($scope.onTimeout,1000);
}
var mytimeout = $timeout($scope.onTimeout,1000);
$scope.takeAction = function(){
if(!$scope.stopped){
$timeout.cancel(mytimeout);
$scope.buttonText='Resume';
}
else
{
mytimeout = $timeout($scope.onTimeout,1000);
$scope.buttonText='Stop';
}
$scope.stopped=!$scope.stopped;
}
});
stackoverflow のRobGから適応したフィルターコード
myApp.filter('formatTimer', function() {
return function(input)
{
function z(n) {return (n<10? '0' : '') + n;}
var seconds = input % 60;
var minutes = Math.floor(input / 60);
var hours = Math.floor(minutes / 60);
return (z(hours) +':'+z(minutes)+':'+z(seconds));
};
});
https://groups.google.com/forum/?fromgroups=#!topic/angular/2MOB5U6Io0A
Igor Minarによる優れたjsfiddleは、setInterval呼び出しでの$ deferの使用と$ applyのラップを示しています。
モジュールを正しく宣言していないか、モジュールが宣言される前に関数を配置した可能性があります(すべてのページが読み込まれたら、ボディの後にangularモジュールを配置するのが安全なルールです)。 anglejsを使用しているため、$ interval(angularjsはWindowsサービスであるsetIntervalと同等)を使用する必要があります。
実用的なソリューションは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS countDown</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
</head>
<body>
<div ng-app="count" ng-controller = "countController"> {{countDown}} </div>
</body>
<script>
angular.module('count', [])
.controller('countController',function($scope, $interval){
$scope.countDown=10;
$interval(function(){
console.log($scope.countDown--);
},1000, $scope.countDown);
});
</script>
</html>
注:htmlビューでは0で停止しますが、console.logでは1で停止します。理由はわかりますか? ;)
「AngularJSでのカウントダウンウォッチのコードの書き方」に役立つかもしれません
ステップ1:HTMLコードサンプル
<div ng-app ng-controller="ExampleCtrl">
<div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div>
<div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div>
<div ng-show="countDown_text == 0">Your password is expired!.</div>
</div>
ステップ2:AngulaJsコードサンプル
function ExampleCtrl($scope, $timeout) {
var countDowner, countDown = 10;
countDowner = function() {
if (countDown < 0) {
$("#warning").fadeOut(2000);
countDown = 0;
return; // quit
} else {
$scope.countDown_text = countDown; // update scope
countDown--; // -1
$timeout(countDowner, 1000); // loop it again
}
};
$scope.countDown_text = countDown;
countDowner()
}
以下に示すAngularJsのカウントダウンウォッチの完全な例
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example - Single Timer Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function ExampleCtrl($scope, $timeout) {
var countDowner, countDown = 10;
countDowner = function() {
if (countDown < 0) {
$("#warning").fadeOut(2000);
countDown = 0;
return; // quit
} else {
$scope.countDown_text = countDown; // update scope
countDown--; // -1
$timeout(countDowner, 1000); // loop it again
}
};
$scope.countDown_text = countDown;
countDowner()
}
</script>
</head>
<body>
<div ng-app ng-controller="ExampleCtrl">
<div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div>
<div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div>
<div ng-show="countDown_text == 0">Your password is expired!.</div>
</div>
</body>
</html>
function timerCtrl ($scope,$interval) {
$scope.seconds = 0;
var timer = $interval(function(){
$scope.seconds++;
$scope.$apply();
console.log($scope.countDown);
}, 1000);
}
var timer_seconds_counter = 120;
$scope.countDown = function() {
timer_seconds_counter--;
timer_object = $timeout($scope.countDown, 1000);
$scope.timer = parseInt(timer_seconds_counter / 60) ? parseInt(timer_seconds_counter / 60) : '00';
if ((timer_seconds_counter % 60) < 10) {
$scope.timer += ':' + ((timer_seconds_counter % 60) ? '0' + (timer_seconds_counter % 60) : '00');
} else {
$scope.timer += ':' + ((timer_seconds_counter % 60) ? (timer_seconds_counter % 60) : '00');
}
$scope.timer += ' minutes'
if (timer_seconds_counter === 0) {
timer_seconds_counter = 30;
$timeout.cancel(timer_object);
$scope.timer = '2:00 minutes';
}
}
私がやったように、それは動作します!
角度コード
var app = angular.module('counter', []);
app.controller('MainCtrl', function($scope,$interval)
{
var decreamentCountdown=function()
{
$scope.countdown -=1;
if($scope.countdown<1)
{
$scope.message="timed out";
}
};
var startCountDown=function()
{
$interval(decreamentCountdown,1000,$scope.countdown)
};
$scope.countdown=100;
startCountDown();
});
HTMLビューコード。
<!DOCTYPE html>
<html ng-app="counter">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link href="style.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8" data-require="[email protected]"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
{{countdown}}
{{message}}
</body>
</html>