2017-06-19 3 views
0

Ich habe ein einfaches Dashboard mit einigen Daten als ein Tryout in Angular erstellt. Mit PHP erhalte ich Wetterdaten, Nachrichten via Google News und 10 Tweets über ein Keyword.Countdown in Angular, mit Neustart

Mit dem $ Intervall aktualisiere ich das Dashboard alle 10 Sekunden, aber ich möchte einen Countdown von 10 bis 0, der immer wieder beginnt, wenn das Intervall ausgelöst wird.

Kann mir jemand helfen, dies zu erreichen?

Aktuelle Code als submitbutton und $ Intervall-Trigger:

$scope.formSubmit = function(){ 
    $scope.getResults(); 
    if($scope.interval){    
     intervalController(); 
    } 
} 

function intervalController(){ 
    $interval($scope.getResults, 10000); 
} 

$scope.getResults = function(){ 
    if($scope.city){ 
     $http({ 
      method: 'POST', 
      url: 'server.php', 
      data: {city : $scope.city} 
     }).then(function successCallback(response){ 
      console.log(response.data); 
       //some data processing here 
     }, function errorCallback(response){ 

     }) 
    } 
} 
+0

Bitte schreiben Sie den Code, den Sie bisher versucht haben –

Antwort

2
$scope.initialCountDownValue = 10; 
$scope.countDownValue = $scope.initialCountDownValue; 
var intervalCanceller = null; 

$scope.formSubmit = function(){ 
    $scope.getResults(); 
    if($scope.interval){    
     intervalController(); 
    } 
} 


function decrementCountdown() { 
    $scope.countDownValue -= 1; 
    if ($scope.countDownValue === 0) { 
    $scope.getResults(); 
    $scope.countDownValue = $scope.initialCountDownValue; 
    } 
} 

function intervalController(){ 
    intervalCanceller = $interval(decrementCountdown, 1000); 
} 

$scope.getResults = function(){ 
    if($scope.city){ 
     $http({ 
      method: 'POST', 
      url: 'server.php', 
      data: {city : $scope.city} 
     }).then(function successCallback(response){ 
      console.log(response.data); 
       //some data processing here 
     }, function errorCallback(response){ 

     }) 
    } 
} 

in $scope.countDownValue haben Sie Ihren Countdown-Wert für den Benutzer angezeigt werden soll.

Ein zusätzlicher Punkt.

Vergessen Sie nicht, Ihr $ Intervall auf der Scope-Destruktion abzubestellen. Oder du wirst ein Intervall haben, das für immer umsonst lebt. Hier ist der Weg, um Ihr Intervall richtig zu zerstören:

$scope.$on('$destroy', function() { 
    if (intervalCanceller) { 
    $interval.cancel(intervalCanceller); 
    } 
});