Winkeldirektive zur Anzeige von Cents als Dollar in einem Eingang

Question

Also muss ich eine Eingabe für die Währung vornehmen, die den Wert als ganze Zahl in Cent speichert. Ich habe eine Direktive, die fast funktioniert, aber nicht ganz. Die folgende Anweisung konvertiert die Daten erfolgreich vom Modell in die Ansicht und nachdem sie geändert wurde, entfernt sie erfolgreich alles, was nicht in dem Modell enthalten ist. Das Problem besteht darin, dass die Ansicht nicht erneut aktualisiert wird, wenn sich das Modell ändert. Also, wenn die Eingabe $ 10.00 zeigt und ich $ 10.00a eintippe, zeigt das Modell korrekt 1000 an, aber das a bleibt im Eingabefeld.

return { 
    require: 'ngModel', 
    link: function (elem, $scope, attrs, ngModel) { 
    ngModel.$formatters.push(function (val) { 
     return '$' + (val/100).toFixed(2); 
    }); 
    ngModel.$parsers.push(function (val) { 
     var replaced = val.replace(/[^\d\.]/g, ''); 
     var split = replaced.split('.'); 
     var merged = split[0] + split[1].slice(0, 2) 
     return Number(merged); 
    }); 
    } 
} 

Answer 1

Um die viewValue Sie anrufen müssen diese beiden Funktionen in der neu aufgeschobenen parser zu aktualisieren:

//update the $viewValue 
ngModel.$setViewValue(displayedValue); 
//reflect on the DOM element 
ngModel.$render(); 

So ist die Richtlinie wird wie folgt aussehen:

.directive('myFilter', [ 
    function() { 
      return { 
      require: 'ngModel', 
       link: function (elem, $scope, attrs, ngModel) { 
        ngModel.$formatters.push(function (val) { 
         return '$' + (val/100).toFixed(2); 
        }); 
        ngModel.$parsers.push(function (val) { 
         //make sure the val is string 
         val = val.toString(); 
         //filter the value for displaying, so keep the '$' 
         var displayedValue = val.replace(/[^\d\.\$]/g, ''); 
         var replaced = val.replace(/[^\d\.]/g, ''); 
         var split = replaced.split('.'); 
         var merged = split[0] + split[1].slice(0, 2); 
         var typeConverted = Number(merged); 
         //update the $viewValue 
      ngModel.$setViewValue(displayedValue); 
      //reflect on the DOM element 
      ngModel.$render(); 
         return typeConverted; 
        }); 
       } 
      } 
     } 
]) 

und ein Arbeits Geige ist hier: fiddle_link

And ein anderer ähnlicher Übersperrposten hat mehr Erklärung über den Grund, warum diese zwei Linien benötigt werden: https://stackoverflow.com/a/36653378/1300334

Hoffnung kann Ihnen helfen.