Wie formatiere ich die Zeit mit AngularJS-Filtern?

Question

Ich habe einen Timer, der von einem Wert herunter zählt, der von einem Benutzer festgelegt wird. Sie geben eine Nummer ein, die als Minuten behandelt wird. Nummer * 1000 * 60, um es in Millisekunden zu konvertieren - und von dort zählt der Zähler herunter und dekrementiert diese Zahl.

Ich möchte diese Zahl als Minuten und Sekunden formatieren. Wenn die eingegebene Zahl also 3,5 ist, sollte sie als 03:30 angezeigt werden.

Ich habe versucht, den Datumsfilter zu verwenden, der von Angular zur Verfügung gestellt wird, aber es ist nicht synchron mit dem Wert des Timers. Es würde einmal dekrementieren und dann aufhören.

Code:

<h4 class="timer">{{ vm.timer.ticks | date: "mm:ss"}}</h4> 

Der Hintergrund für den Timer ist in einem Service

start(duration) { 
    this.ticks = duration; 
    this.timer = this.$interval(() => { 
    if (this.ticks === 0) return this.stop(); 
    this.ticks--; 
    }, 1000); 
} 

Answer 1

Ok, also ... Ich habe einen schrecklichen Fehler, wenn ich die Zeit rechnet ...

I $ scope einrichten beobachtet $ zu. wache über meine Variable aus dem Service und entsprechend änderte ich paar andere Variablen.

$scope.$watch('vm.timer.ticks', value => { 
    if (value <= 0) { 
    vm.timer.count = 0; 
    vm.timer.latest = ''; 
    } 
    if(vm.timer.ticks > 0) { 
    seconds = vm.timer.ticks % 60; 
    minutes = Math.floor(vm.timer.ticks/60); 
    filledMinutes = minutes < 10 ? "0" + minutes : minutes; 
    filledSeconds = seconds < 10 ? "0" + seconds : seconds; 
    vm.displayTime = filledMinutes + ':' + filledSeconds; 
    } else { 
    vm.displayTime = '00:00'; 
    } 
}); 

Answer 2

Ich denke, es liegt daran, dass Sie "die" in Ihrer inneren Funktion versteckt. Versuchen Sie es als neu zu schreiben (nicht getestet!):

start(duration) { 
    var ticks = duration; 
    this.timer = this.$interval(() => { 
    if (ticks === 0) return this.stop(); 
    ticks--; 
    }, 1000); 
}