Benutzereingaben korrigieren in angularJS

Question

Ich versuche, einen Filter zu erstellen, der Zeit in Sekunden umwandelt, zum Beispiel: 01:30:10 zu 5410 und umgekehrt, also habe ich am Ende nur Sekunden in meinem Modell, und der Benutzer wird dazu eine bessere Darstellung sehen.

Bisher konnte ich ein funktionierendes Beispiel mit einer Richtlinie erstellen, aber jetzt will ich versuchen, Tippfehler zu korrigieren, und zwar diese Art von Fehlern: Benutzertypen 1:62:30 sollte 2:02:30 korrigiert werden, das gleiche mit Sekunden.

Das Problem ist, dass es scheint, als ob es die Ansicht nicht aktualisiert, , aber das Modell wird aktualisiert.

Dies ist eine vereinfachte Version des Codes:

app.directive('timeFormatter', ['$filter', function($filter) { 
    return { 
     restrict: "A", 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelController) { 

      ngModelController.$parsers.push(function(formattedTime) { 
       // here i return a Number usgin math and RegEx 
      }); 

      ngModelController.$formatters.push(function(fullSeconds) { 
       // here i return a String formatted like this: 
       // return `${hours}:${minutes}:${seconds}`; 
      }); 
     } 
    }; 
}]); 

hier ist der html:

<input class="small" type="text" time-formatter ng-model="answer.end"> 

Und hier gibt es eine Arbeits Geige: https://jsfiddle.net/shock/2ju3hfqu/2/

Answer 1

Wie Sie die aktualisieren möchten Elemente Wert innerhalb der Direktive, können Sie element.val()

012 verwenden

können Sie diese eddited fiddle überprüfen. Wenn Sie mehr als 60 Minuten eingeben, wird automatisch in die richtigen Minuten gewechselt. Sie können auch mit den Stunden und Sekunden machen, wenn Sie wollen.

Siehe meine Logik unten ist nur ein Beispiel und Sie können es ändern, wenn Sie möchten. Ich bin einfach bro

eine Idee geben

--UPDATE-- hinzugefügt Sekunden wird automatisch konvertieren zu wie Minuten --UPDATE-- hunderte nicht nur zwei Ziffern

app.directive('timeConverter', ['$filter', function($filter) { 
return { 
require: 'ngModel', 
link: function(scope, element, attrs, ngModelController) { 
    ngModelController.$parsers.push(function(formattedTime) { 
    let re = /^(?:(?:(?:(\d+):)?(\d{1,3})):)?(\d{1,3})$/, 
     timeArray = re.exec(formattedTime), 
     // Set some default if a number is not found it will be equal to undefined. 
     hours = Number(timeArray[1]) || 0, 
     minutes = Number(timeArray[2]) || 0, 
     seconds = Number(timeArray[3]) || 0; 
    hr = 0; 
    mn = 0; 
    console.log(hours,minutes,seconds); 
    if(minutes >= 60 || seconds >= 60){ 
      hr = Math.floor(minutes/60); 
     mn = Math.floor(seconds/60); 
     if(hr >= 1 || mn >= 1){ 
      remMin = minutes % 60; 
      remSec = seconds % 60; 
      remSec = (remSec < 10)?'0'+remSec:remSec; 
      newMin = mn+remMin; 
      newMin = (newMin < 10)?'0'+newMin:newMin; 
      newHour = hr+hours; 
      newHour = (newHour < 10)?'0'+newHour:newHour; 
      chngeFrmat = [newHour,newMin,remSec]; 
      console.log(chngeFrmat.join(':')); 
      element.val(chngeFrmat.join(':')); 
     } 
    } 
      console.log(minutes); 
    console.log(timeArray); 

    // Basic math, i use the brakets because its easier to read... dont judge. 
    return ((hours * 60) * 60) + (minutes * 60) + seconds; 
    }); 

    ngModelController.$formatters.push(function(fullSeconds) { 
    let hours = Math.floor(fullSeconds/60 /60), 
     minutes = Math.floor(fullSeconds/60) % 60, 
     seconds = Math.floor(fullSeconds % 60); 
     return `${hours}:${minutes}:${seconds}`; 
     }); 
    } 
}; 
}]);