les angularjs font un simple compte à rebours
je voudrais faire un compte à rebours avec Angular js. c'est mon code:
Fichier Html
<div ng-app ng-controller = "countController"> {{countDown}} <div>
fichier js
function countController($scope){
$scope.countDown = 10;
var timer = setInterval(function(){$scope.countDown--; console.log($scope.countDown)},1000);
}
en console.journal il fonctionne j'ai un compte à rebours mais dans {{compte à rebours}} actualiser il n'a pas pourriez-vous m'aider s'il vous plaît? merci!
10 réponses
veuillez regarder cet exemple ici. C'est un exemple simple d'un comte! Que vous pourriez facilement modifier pour créer un compte à rebours.
http://jsfiddle.net/ganarajpr/LQGE2/
code JavaScript:
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);
}
}
HTML markup:
<!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>
depuis la version 1.3 il y a un service dans le module ng: $interval
function countController($scope, $interval){
$scope.countDown = 10;
$interval(function(){console.log($scope.countDown--)},1000,0);
}
utiliser avec prudence:
Note: les intervalles créés par ce service doivent être explicitement détruits lorsque vous avez terminé avec eux. En particulier, ils ne sont pas automatiquement détruit lorsque le champ d'application d'un contrôleur ou d'une directive élément sont détruits. Vous devriez prendre cela en considération et assurez-vous d'annuler toujours l'intervalle à la moment approprié. Voir l'exemple ci-dessous pour plus de détails sur comment et quand le faire.
vous devez utiliser $scope.$apply () quand vous exécutez une expression angulaire de l'extérieur du cadre angulaire.
function countController($scope){
$scope.countDown = 10;
var timer = setInterval(function(){
$scope.countDown--;
$scope.$apply();
console.log($scope.countDown);
}, 1000);
}
j'ai mis à jour la réponse de M. ganaraj pour montrer la fonctionnalité d'arrêt et de reprise et j'ai ajouté le filtre Angulaire js au format countdown timer
code du contrôleur
'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;
}
});
code filtre adapté de RobG de 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
Quelques grands jsfiddle par Igor Minar montrant l'utilisation de $reporter et d'emballage $s'appliquent à un appel setInterval.
il pourrait aider à "comment écrire le code pour la montre compte à rebours à AngularJS"
Étape 1: code HTML-exemple
<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>
Étape 2: le code AngulaJs-échantillon
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()
}
Le plein par exemple un compte à rebours de la montre en AngularJs comme indiqué ci-dessous.
<!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);
}
comme je l'ai fait , ça marche!
- *version angulaire 1.5.8 et supérieure.
code angulaire
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();
});
Afficher Le Code 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="angular.js@1.5.x"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
{{countdown}}
{{message}}
</body>
</html>
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';
}
}
vous n'avez probablement pas déclaré votre module correctement, ou vous avez mis la fonction avant que le module soit déclaré (la règle de sécurité est de mettre module angulaire après le corps, une fois que toute la page est chargée). Puisque vous utilisez angularjs, alors vous devez utiliser $ interval (angularjs équivalence à setInterval qui est un service windows).
Voici une solution de travail:
<!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>
Note: il s'arrête à 0 dans la vue html, mais à 1 dans la console.journal, pouvez-vous comprendre pourquoi? ;)