Ich möchte einen Countdown mit Angular Js machen. Das ist mein Code:
HTML-Datei
<div ng-app ng-controller = "countController"> {{countDown}} <div>
js Datei
function countController($scope){
$scope.countDown = 10;
var timer = setInterval(function(){$scope.countDown--; console.log($scope.countDown)},1000);
}
in console.log funktioniert es. Ich habe einen Countdown, aber in {{countdown}} Refresh tut es nicht Könnten Sie mir bitte helfen? Vielen Dank!
Bitte schauen Sie sich dieses Beispiel hier an. Es ist ein einfaches Beispiel für einen Countdown! Ich denke, Sie könnten leicht ändern, um einen Countdown zu erstellen.
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>
Ab Version 1.3 gibt es einen Dienst im Modul ng: $interval
function countController($scope, $interval){
$scope.countDown = 10;
$interval(function(){console.log($scope.countDown--)},1000,0);
}
Mit Vorsicht verwenden:
Hinweis: Von diesem Dienst erstellte Intervalle müssen explizit gelöscht werden wenn du mit ihnen fertig bist. Insbesondere sind sie nicht automatisch zerstört, wenn ein Controller oder eine Direktive Element werden zerstört. Sie sollten dies berücksichtigen und Stellen Sie sicher, dass Sie das Intervall immer zum richtigen Zeitpunkt löschen. Sehen Das Beispiel unten zeigt weitere Details dazu, wie und wann dies zu tun ist.
Sie sollten $ scope verwenden. $ Apply () , wenn Sie einen Winkelausdruck von außerhalb des Winkelrahmens ausführen.
function countController($scope){
$scope.countDown = 10;
var timer = setInterval(function(){
$scope.countDown--;
$scope.$apply();
console.log($scope.countDown);
}, 1000);
}
Ich habe die Antwort von Mr. ganaraj überarbeitet, um die Stop- und Resume-Funktionalität zu zeigen, und einen js-Filter für den Formatcountdown-Timer hinzugefügt
controller-Code
'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;
}
});
filtercode angepasst von RobG aus stackoverflow
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
Einige großartige jsfiddle's von Igor Minar, die die Verwendung von $ defer zeigen und $ einwickeln, gelten für einen setInterval-Aufruf.
Sie haben Ihr Modul wahrscheinlich nicht korrekt deklariert, oder Sie haben die Funktion vor der Deklaration des Moduls eingefügt. Da Sie anglejs verwenden, sollten Sie $ Intervall verwenden (die Äquivalenz von anglejs zu setInterval, einem Windows-Dienst).
Hier ist eine funktionierende Lösung:
<!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>
Hinweis: Er stoppt in der HTML-Ansicht bei 0, aber bei 1 in der console.log können Sie herausfinden, warum? ;)
Es könnte hilfreich sein, "Wie man den Code für die Countdown-Überwachung in AngularJS schreibt"
Schritt 1: HTML Code-Beispiel
<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>
Schritt 2: Die AngulaJs Code-Probe
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()
}
Das vollständige Beispiel für die Countdown-Überwachung in AngularJs wie unten angegeben.
<!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';
}
}
So wie ich es gemacht habe, funktioniert es!
Winkelcode
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-Code anzeigen.
<!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>