如何使用AngularJS过滤器格式化时间？

Question

I have a timer that is counting down from a value that is being set by some user. They enter some number which is being treated as minutes. number * 1000 * 60 to convert it into milliseconds - and from there the counter is counting down and decrements this number.

What I want to do is format this number as minutes and seconds so if the entered number is 3.5, it should be shown as 03:30.

I've tried using the date filter which is provided by Angular but it's not in sync with the value of the timer. It would decrement once and then stops.

Code:

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

The background for the timer is in a service

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

Answer 1

I think it is because you are hiding "this" in your inner function. Try to rewrite it as (untested!):

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

Answer 2

Ok, so... I made a terrible mistake when I was calculating the time...

I set up $scope.$watch to watch over my variable from the service and according to that i was changing couple other variables.

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