2013-06-27 5 views
11

Ich muss eine Änderungsrate - in Prozent - von den Benutzern meiner Anwendung erfassen. Hier ist die Texteingabe Ich verwende:AngularJS: Sollte ich einen Filter verwenden, um ganzzahlige Werte in Prozent zu konvertieren?

<label for="annual-change" class="pt-underline"> I am anticipating 
<input id="annual-change" ng-model="calc.yrChange" type="text" placeholder="0" /> % of growth annually.<br><br> 
</label> 

Nun, was ich will, ist ein Filter zu verwenden, die den ganzzahligen Betrag, um den Benutzereingaben nimmt und wandelt es in ein Prozentsatz, indem sie durch 0.01 Multiplikation oder durch 100 Dividieren bevor ich es an die Steuerung für Berechnungen senden

Aber ich kann einfach nicht herausfinden, wo den Filter und wie man es haken. Also versuchte ich es mit einer Richtlinie wie folgt:

app.directive("percent", function($filter){ 
    var p = function(viewValue){ 
     console.log(viewValue); 
     var m = viewValue.match(/^(\d+)/); 
     if (m !== null) 
     return $filter('number')(parseFloat(viewValue)/100); 
    }; 

    var f = function(modelValue){ 
     return $filter('number')(parseFloat(modelValue)*100); 
    }; 

    return { 
     require: 'ngModel', 
     link: function(scope, ele, attr, ctrl){ 
      ctrl.$parsers.unshift(p); 
      ctrl.$formatters.unshift(f); 
     } 
    }; 
}); 

Diese Art der Arbeiten, aber sollte ich nicht einen Filter für diese Aufgabe verwenden? Wie mache ich das?

+0

Filter sind da, um den Inhalt eines Arrays einem anderen zuzuordnen. Ich denke, du solltest die Umwandlung in Controller machen. Was hält Sie davon ab, Controller zu verwenden? – Chandermani

+0

hmm - Ich dachte, Filter waren zum 'Filtern' von Werten, also dachte ich, Formatierung, Konvertierung usw. sollte in Filtern sein –

+0

Es gibt ein Nein von Feldern, die durch diese Konvertierung gehen müssen und ich dachte, die Logik würde in der Steuerung wiederholt werden –

Antwort

4

Nun, Sie haben es einfach die absolut richtige Art und Weise mit der Strg. $ Parser und Strg. $ Formatierer Sie können nur die $ Filter Sache weglassen, es ist absolut nicht erforderlich dort. Just check it out sie verwenden den Filter dort auch nicht.

+0

Sie haben recht - es funktioniert - hier ist ein funktionierender Plünderer: http://plnkr.co/edit/Pfzyn4Bmw2B9jJzDVU1g ?p = Vorschau –

+0

Eigentlich bin ich wirklich überrascht, dass Sie so weit gekommen sind, all diese richtigen Dinge mit der Direktive, der erforderlichen ngModelDirective, Formatierern und allem zu tun und plötzlich diesen Filter-Blooper :) – kfis

+0

ok, also habe ich tatsächlich das Code-Snippet gefunden SO und es schien und immer noch ziemlich kryptisch für mich. Ich hätte gedacht, dass ein Filter Modelldaten transformiert und sie von der Ansicht zum Controller weiterleitet, aber das stimmt nicht. –

0

Ich denke, Sie sollten eine Direktive verwenden. Wenn Sie glauben, dass Sie bald darauf zurückkommen, JQuery zu verwenden, um mit der Manipulation der DOM-Elemente zu beginnen, dann ist wahrscheinlich eine Anweisung das, was Sie wollen.

Dies ist ein Beispiel eines Filters: http://embed.plnkr.co/TT6ZwOF6nYXwMcemR3JF/preview

Was könnten Sie tun, ist, den Wert auswählen, die Sie als Teil einer Uhr Veranstaltung ein. Dies hängt jedoch von Ihrem speziellen Anwendungsfall ab.

+0

Schätzen Sie das Beispiel, aber ich denke, was ich nicht verstanden habe ist, dass Filter nur Daten darstellen - sie nicht ' t update die Modelldaten - also ich denke, ich will etwas ist, das das tut - in diesem Fall steht mein Codebeispiel immer noch –