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!

47
demandé sur acdcjunior 2012-08-21 11:39:02

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>
58
répondu ganaraj 2014-03-11 23:27:22

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.

De: Angulaire de la documentation officielle .

24
répondu jpfreire 2016-09-23 14:11:32

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

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

9
répondu Artem Andreev 2012-08-21 07:53:44

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

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

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));
    };
});
7
répondu Shaheen 2017-05-23 11:46:47

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.

2
répondu shapeshifter 2012-08-30 02:00:27

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>
1
répondu Anil Singh 2014-12-20 05:59:41
function timerCtrl ($scope,$interval) {
    $scope.seconds = 0;
    var timer = $interval(function(){
        $scope.seconds++;
        $scope.$apply();
        console.log($scope.countDown);
    }, 1000);
}
0
répondu Betite 2014-08-10 14:39:53

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>
0
répondu kingsman 2016-09-22 08:31:57
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
répondu Partha Roy 2017-04-17 07:15:44

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

0
répondu Tan Tran 2018-06-14 19:19:16