angularjs fazer uma contagem decrescente simples

Question

angularjs fazer uma contagem decrescente simples

Quero fazer uma contagem decrescente com js angulares. este é o meu código:

Ficheiro Html

<div ng-app ng-controller = "countController"> {{countDown}} <div>

Ficheiro Js

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

Na consola.se funcionar, tenho uma contagem decrescente, mas no refresh não funciona. pode ajudar-me, por favor? obrigado!

47

html javascript angularjs templates countdown

Author: acdcjunior, 2012-08-21

Source

10 answers

score 58 · Answer 1

Por favor, dê uma olhada neste exemplo aqui. É um exemplo simples de contagem! Que eu acho que você poderia facilmente modificar para criar uma contagem decrescente.

Http://jsfiddle.net/ganarajpr/LQGE2/

Código de 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);
    }
}

Marcação em 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>

score 24 · Answer 2

A partir da versão 1.3, há um serviço no módulo ng.: $interval

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

Utilizar com precaução:

Nota: os intervalos criados por este serviço devem ser explicitamente destruídos quando acabares com eles. Em especial, não são destruição automática quando o âmbito de aplicação de um controlador ou de uma directiva o elemento foi destruído. Deve ter isto em consideração e certifique-se de sempre cancelar o intervalo no momento apropriado. Ver o exemplo abaixo para mais detalhes sobre como e quando fazer isso.

De: a documentação oficial do Angular.

score 9 · Answer 3

Deve usar $scope.$apply () quando executa uma expressão angular de fora da estrutura angular.

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/

score 7 · Answer 4

Actualizei a resposta do Sr. ganaraj para mostrar a funcionalidade de parar e retomar e adicionei o filtro angular js para formatar o temporizador countdown

Está aqui no jsFiddle.

Código do controlador

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

Filtro-código adaptado do 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));
    };
});

score 2 · Answer 5

Https://groups.google.com/forum/?fromgroups=#! topic/angular / 2mob5u61o0a

Alguns jsfiddle's grandes de Igor Minar mostrando o uso de $deferer e embrulho $aplicar em uma chamada setInterval.

score 1 · Answer 6

1

Author: Anil Singh, 2014-12-20 05:59:41

score 0 · Answer 7

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

score 0 · Answer 8

Da maneira que eu fiz, funciona!

* Versão angular 1.5.8 e superior.

Código Angular

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

Código De Visualização Em 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>

score 0 · Answer 9

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

score 0 · Answer 10

Provavelmente não declarou correctamente o seu módulo, ou colocou a função antes de o Módulo ser declarado (a regra segura é colocar o módulo angular depois do corpo, logo que toda a página esteja carregada). Dado que está a usar angularjs, então deverá usar $interval (equivalência angularjs ao setInterval que é um serviço do windows).

Aqui está uma solução de trabalho:

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

Nota: pára em 0 na janela html, mas em 1 na consola.log, consegues descobrir porquê? ;)