wake-up-neo.com

anglejs machen einen einfachen Countdown

Ich möchte einen Countdown mit Angular Js machen. Das ist mein Code:

HTML-Datei

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

js Datei

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

in console.log funktioniert es. Ich habe einen Countdown, aber in {{countdown}} Refresh tut es nicht Könnten Sie mir bitte helfen? Vielen Dank!

javascripthtmltemplatescountdownangularjs
48
user1613464

Bitte schauen Sie sich dieses Beispiel hier an. Es ist ein einfaches Beispiel für einen Countdown! Ich denke, Sie könnten leicht ändern, um einen Countdown zu erstellen. 

http://jsfiddle.net/ganarajpr/LQGE2/

JavaScript-Code:

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-Auszeichnung:

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

Ab Version 1.3 gibt es einen Dienst im Modul ng: $interval

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

Mit Vorsicht verwenden:

Hinweis: Von diesem Dienst erstellte Intervalle müssen explizit gelöscht werden wenn du mit ihnen fertig bist. Insbesondere sind sie nicht automatisch zerstört, wenn ein Controller oder eine Direktive Element werden zerstört. Sie sollten dies berücksichtigen und Stellen Sie sicher, dass Sie das Intervall immer zum richtigen Zeitpunkt löschen. Sehen Das Beispiel unten zeigt weitere Details dazu, wie und wann dies zu tun ist.

Von: Angulars offizielle Dokumentation .

24
jpfreire

Sie sollten $ scope verwenden. $ Apply () , wenn Sie einen Winkelausdruck von außerhalb des Winkelrahmens ausführen. 

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

Ich habe die Antwort von Mr. ganaraj überarbeitet, um die Stop- und Resume-Funktionalität zu zeigen, und einen js-Filter für den Formatcountdown-Timer hinzugefügt

es ist hier auf jsFiddle

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

filtercode angepasst von RobG aus 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

Einige großartige jsfiddle's von Igor Minar, die die Verwendung von $ defer zeigen und $ einwickeln, gelten für einen setInterval-Aufruf.

2
shapeshifter

Sie haben Ihr Modul wahrscheinlich nicht korrekt deklariert, oder Sie haben die Funktion vor der Deklaration des Moduls eingefügt. Da Sie anglejs verwenden, sollten Sie $ Intervall verwenden (die Äquivalenz von anglejs zu setInterval, einem Windows-Dienst).

Hier ist eine funktionierende Lösung:

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

Hinweis: Er stoppt in der HTML-Ansicht bei 0, aber bei 1 in der console.log können Sie herausfinden, warum? ;)

1
Tan Tran

Es könnte hilfreich sein, "Wie man den Code für die Countdown-Überwachung in AngularJS schreibt"

Schritt 1: HTML Code-Beispiel 

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

Schritt 2: Die AngulaJs Code-Probe 

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

Das vollständige Beispiel für die Countdown-Überwachung in AngularJs wie unten angegeben. 

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

So wie ich es gemacht habe, funktioniert es!

  • * Winkelversion 1.5.8 und höher.

Winkelcode

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-Code anzeigen.

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