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

dans la 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!

Encore plus facile, un pré-construit directive: siddii.github.io/angulaires-timer

InformationsquelleAutor | 2012-08-21

Veuillez jeter un oeil à cet exemple. C'est un exemple simple de compter jusqu'! Je pense que vous pouvez 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);
    }
}

Balisage 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>

Voici une modification qui n'a de compte à rebours de: jsfiddle.net/dpeaep/LQGE2/1
bon, j'ai utilisé $interval au lieu de $timeout
Comment voulez-vous arrêter l'horloge?
D'accord avec @Andres - j'ai l'impression $intervalle est le chemin à parcourir. C'est la réponse j'ai par la suite utilisé pour un angularjs minuterie de mise en œuvre.

InformationsquelleAutor ganaraj

24

À partir de 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:

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

À partir de: Angulaire de la documentation officielle.
- Merci. Pour quelqu'un d'autre vous demandez-vous, ce n'est pas limité à 1,3: code.angularjs.org/1.2.12/docs/api/ng.$intervalle
InformationsquelleAutor jpfreire
9

Vous devez utiliser $scope.$appliquer() lorsque vous exécutez une angulaire de l'expression de l'extérieur de l'angle du cadre.
```
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/
- Directement à l'aide de setTimeOut ou setInterval n'est pas une bonne pratique dans Angulaire. Vous devriez être en utilisant le $timeout service.
- Cela dépend de la tâche. Praticité beats pureté.
- Il est l' $timeout service AngularJS qui mettrait $s'appliquent automatiquement.
- Merci, vous n'avez pas dit quelque chose de nouveau. Je suis capable de lire les réponses et les commentaires 🙂 je pense qu'il est bon d'avoir deux réponses. On explique pourquoi le code ne fonctionne pas et comment vous pouvez le faire fonctionner. Et un autre qui explique comment il pourrait être fait plus anguleux façon.
- Votre réponse est beaucoup mieux. Vous êtes à l'aide de l'intervalle qui est beaucoup plus approprié pour un compteur.
- pouvez-vous montrer le code pour obtenir la même chose avec $timeout service?
InformationsquelleAutor Artem Andreev

J'ai mis à jour M. ganaraj réponse à montrer arrêter et de reprendre les fonctionnalités et ajouté angular js filtre pour le format de compte à rebours

il est ici, sur jsFiddle

contrôleur de 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;
    }   
});

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

Merci pour le format utile Filtre
Je ne pense pas que le format de la minuterie est de retour la bonne réponse.. disons le d'entrée est de 7200. il serait de retour 02:120:00. Je pense que vous devriez le format de la minuterie par le calcul de la première heure.

InformationsquelleAutor Shaheen

2

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

Quelques grands jsfiddle par Igor Minar montrant l'utilisation de $reporter et d'emballage $s'appliquent à un appel setInterval.

InformationsquelleAutor shapeshifter

Il pourrait aider à "Comment écrire le code pour le compte à rebours de la montre en AngularJS"

Étape 1 : le Code HTML de l'échantillon

<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 AngulaJs de code de l'é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()
}

L'exemple complet sur le 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>

InformationsquelleAutor Anil Singh

1

Vous n'avez probablement pas déclarer votre module correctement, ou que vous mettez la fonction avant que le module est déclaré (règle de sécurité est de mettre angulaire module après le corps, une fois que tous le chargement de la page). Puisque vous êtes en utilisant angularjs, alors vous devriez utiliser $intervalle (angularjs équivalence à setInterval qui est un service windows).

Ici est 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 le code html de la vue, mais à 1 dans la console.journal, pouvez-vous comprendre pourquoi? 😉
- Veuillez expliquer comment et pourquoi votre solution fonctionne
- Le code est assez simple si vous regardez $intervalle d'utilisation ici docs.angularjs.org/api/ng/service/$interval. $intervalle d'un service qui diminue le compte à rebours de toutes les secondes (ie. 1000 = 1sec), et le troisième paramètre indique à elle de le faire 10x (puisque $champ d'application.le compte à rebours valeur initiale est de 10).
InformationsquelleAutor Tan Tran

function timerCtrl ($scope,$interval) {
    $scope.seconds = 0;
    var timer = $interval(function(){
        $scope.seconds++;
        $scope.$apply();
        console.log($scope.countDown);
    }, 1000);
}

InformationsquelleAutor Betite

La façon dont je l'ai fait , ça marche!!!

*angulaire de la version 1.5.8 et au-dessus.

Angulaire code

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 Afficher Le Code.

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

Il n'est pas de travail.

InformationsquelleAutor kingsman

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

InformationsquelleAutor Partha Roy

Vous devez vous connecter pour publier un commentaire.