javascript - directivas - ng angular
angularjs hace una cuenta regresiva simple (10)
Me gustaría hacer un conteo con Angular js. este es mi código:
Archivo Html
<div ng-app ng-controller = "countController"> {{countDown}} <div>
js Archivo
function countController($scope){
$scope.countDown = 10;
var timer = setInterval(function(){$scope.countDown--; console.log($scope.countDown)},1000);
}
en console.log funciona Tengo una cuenta atrás, pero en {{countdown}} refresh no puede ayudarme por favor? ¡Gracias!
¡De la manera en que lo hice, funciona!
- * versión angular 1.5.8 y 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 vista 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>
A partir de la versión 1.3 hay un servicio en el módulo ng: $interval
function countController($scope, $interval){
$scope.countDown = 10;
$interval(function(){console.log($scope.countDown--)},1000,0);
}
Usar con precaución:
Nota: Los intervalos creados por este servicio deben destruirse explícitamente cuando haya terminado con ellos. En particular, no se destruyen automáticamente cuando se destruye el alcance de un controlador o el elemento de una directiva. Debe tener esto en cuenta y asegúrese de cancelar siempre el intervalo en el momento apropiado. Consulte el ejemplo a continuación para obtener más detalles sobre cómo y cuándo hacer esto.
Actualicé la respuesta del Sr. ganaraj para mostrar la funcionalidad detener y reanudar y agregué el filtro angular js para formatear el temporizador de cuenta regresiva
código de 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;
}
});
código de filtro adaptado de RobG de
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));
};
});
Debería usar $scope.$apply() cuando ejecuta una expresión angular desde fuera del marco angular.
function countController($scope){
$scope.countDown = 10;
var timer = setInterval(function(){
$scope.countDown--;
$scope.$apply();
console.log($scope.countDown);
}, 1000);
}
Podría ser útil "Cómo escribir el código para ver la cuenta atrás en AngularJS"
Paso 1: Muestra de código 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>
Paso 2: la muestra de código de 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()
}
El ejemplo completo de la cuenta regresiva en AngularJs como se muestra a continuación.
<!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>
Por favor, eche un vistazo a este ejemplo aquí. ¡Es un simple ejemplo de un conteo ascendente! Lo cual creo que podrías modificar fácilmente para crear una cuenta regresiva.
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);
}
}
Marcado 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>
Probablemente no haya declarado su módulo correctamente o haya puesto la función antes de que se declare el módulo (la regla segura es colocar el módulo angular después del cuerpo, una vez que se haya cargado toda la página). Como está usando angularjs, debe usar $ interval (equivalencia de angularjs para setInterval, que es un servicio de Windows).
Aquí hay una solución de trabajo:
<!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: se detiene en 0 en la vista html, pero en 1 en console.log, ¿puede averiguar por qué? ;)
https://groups.google.com/forum/?fromgroups=#!topic/angular/2MOB5U6Io0A
Algunos grandes jsfiddle de Igor Minar que muestran el uso de $ defer y wrapping $ se aplican en una llamada setInterval.
function timerCtrl ($scope,$interval) {
$scope.seconds = 0;
var timer = $interval(function(){
$scope.seconds++;
$scope.$apply();
console.log($scope.countDown);
}, 1000);
}
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'';
}
}