Bitte sehen Sie sich dieses Beispiel hier an. Es ist ein einfaches Beispiel für ein Hochzählen! Was Sie meiner Meinung nach leicht ändern könnten, um einen Countdown zu erstellen.
Stimme @Andres zu – ich glaube, $interval ist der richtige Weg. Dies ist die Antwort, die ich schließlich für eine Angularjs-Timer-Implementierung verwendet habe.
– Jaycer
20. Dezember 2016 um 14:50 Uhr
jpfreire
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 zerstört werden, wenn Sie damit fertig sind. Insbesondere werden sie nicht automatisch zerstört, wenn der Geltungsbereich eines Controllers oder das Element einer Anweisung zerstört werden. Dies sollten Sie berücksichtigen und darauf achten, das Intervall immer zum passenden Zeitpunkt abzubrechen. Im folgenden Beispiel finden Sie weitere Einzelheiten dazu, wie und wann dies zu tun ist.
Die direkte Verwendung von setTimeOut oder setInterval ist in Angular keine gute Praxis. Sie sollten den Dienst $timeout verwenden.
– Ganaraj
21. August 2012 um 10:10 Uhr
@ganaraj Es kommt auf die Aufgabe an. Praktikabilität schlägt Reinheit.
– Artjom Andrejew
21. August 2012 um 17:35 Uhr
Es gibt den $timeout-Dienst in AngularJS, der $apply automatisch aufruft.
– pkozlowski.opensource
21. August 2012 um 21:04 Uhr
@pkozlowski.opensource Danke, du hast nichts Neues gesagt. Ich kann Antworten und Kommentare lesen 🙂 Ich denke, dass es gut ist, zwei Antworten zu haben. Einer erklärt, warum Code nicht funktioniert und wie Sie ihn zum Laufen bringen können. Und eine andere, die erklärt, wie es eckiger gemacht werden könnte.
– Artjom Andrejew
22. August 2012 um 6:00 Uhr
Deine Antwort ist viel besser. Sie verwenden ein Intervall, das für einen Zähler viel besser geeignet ist.
– Typ mograbi
7. April 2013 um 6:12 Uhr
Shaheen
Ich habe die Antwort von Mr. Ganaraj aktualisiert, um die Stopp- und Wiederaufnahmefunktion anzuzeigen, und einen eckigen js-Filter hinzugefügt, um den Countdown-Timer zu formatieren
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));
};
});
Es könnte helfen, “Wie schreibe ich den Code für die Countdown-Uhr in AngularJS”
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: Das Codebeispiel von 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()
}
Das vollständige Beispiel für die Countdown-Uhr in AngularJs ist 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>
Nircraft
Wahrscheinlich haben Sie Ihr Modul nicht richtig deklariert oder Sie haben die Funktion vor der Deklaration des Moduls platziert (eine sichere Regel ist, das Winkelmodul nach dem Hauptteil zu platzieren, sobald die gesamte Seite geladen ist). Da Sie anglejs verwenden, sollten Sie verwenden $Intervall (Angularjs-Äquivalenz zu setInterval, einem Windows-Dienst).
Noch einfacher, eine vorgefertigte Direktive: siddii.github.io/angular-timer
– Brett
12. März 2014 um 4:33 Uhr