web-dev-qa-db-fra.com

angularjs faire un compte à rebours simple

Je voudrais faire un compte 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);  
}​​

dans console.log cela fonctionne, j'ai un compte à rebours, mais dans {{compte à rebours}}, l'actualisation ne fonctionne pas pourriez-vous m'aider s'il vous plaît? Merci!

javascripthtmltemplatescountdownangularjs
48
user1613464

S'il vous plaît jeter un oeil à cet exemple ici. C'est un exemple simple de comptage! Ce que je pense 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);
    }
}

Balise HTML:

<!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>
58
ganaraj

A partir de la version 1.3, il existe un service dans le module ng: $interval

function countController($scope, $interval){
    $scope.countDown = 10;    
    $interval(function(){console.log($scope.countDown--)},1000,0);
}​​

Utiliser avec précaution:

Remarque: les intervalles créés par ce service doivent être explicitement détruits quand vous avez fini avec eux. En particulier, ils ne le sont pas détruit automatiquement lorsque la portée d'un contrôleur ou une directive élément sont détruits. Vous devriez prendre cela en considération et assurez-vous de toujours annuler l'intervalle au bon moment. Voir l'exemple ci-dessous pour plus de détails sur comment et quand le faire.

De: Documentation officielle de Angular .

24
jpfreire

Vous devez utiliser $ scope. $ Apply () lorsque vous exécutez une expression angulaire hors du cadre angulaire. 

function countController($scope){
    $scope.countDown = 10;    
    var timer = setInterval(function(){
        $scope.countDown--;
        $scope.$apply();
        console.log($scope.countDown);
    }, 1000);  
}

http://jsfiddle.net/andreev_artem/48Fm2/

9
Artem Andreev

J'ai mis à jour la réponse de M. Ganaraj pour afficher les fonctionnalités d'arrêt et de reprise et ajouté un filtre js angulaire pour le formatage du compte à rebours

c'est ici sur jsFiddle

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;
    }   
});

filtre-code adapté de RobG from 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));
    };
});
7
Shaheen

https://groups.google.com/forum/?fromgroups=#!topic/angular/2MOB5U6Io0A

Quelques grands jsfiddle de Igor Minar montrant l'utilisation de $ deffer et wrapping $ s'appliquent dans un appel setInterval.

2
shapeshifter

Vous n'avez probablement pas déclaré votre module correctement ou vous avez mis la fonction avant que le module ne soit déclaré (la règle de sécurité consiste à mettre le module angulaire après le corps, une fois que toute la page est chargée). Puisque vous utilisez angularjs, vous devez utiliser $ interval (l’équivalence angularjs avec 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>

Remarque: il s'arrête à 0 dans la vue html, mais à 1 dans le fichier console.log, pouvez-vous comprendre pourquoi? ;)

1
Tan Tran

Cela pourrait aider à "Comment écrire le code pour regarder le compte à rebours dans AngularJS"

Étape 1: Exemple de code 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>

Étape 2: L’échantillon de code 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()
}

L'exemple complet sur la montre à rebours dans AngularJs est donné 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>
1
Anil Singh
function timerCtrl ($scope,$interval) {
    $scope.seconds = 0;
    var timer = $interval(function(){
        $scope.seconds++;
        $scope.$apply();
        console.log($scope.countDown);
    }, 1000);
}
0
Betite
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';
      }
    }
0
Partha Roy

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();
});

Code d'affichage 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>
0
kingsman