Ich benötige eine Direktive zum Filtern eines Feldes nach Währung, daher muss ein Benutzer nur tippen und die Dezimalzahl ist impliziert.

Needs:

Format Dezimalfeld als Benutzertypen -

Starten Sie an der Hundertstelstelle, während der Benutzer tippt. Sie tippen also "4" und sehen "0.04", tippen "42" und sehen "0.42", tippen 298023 und sehen "2980.23"

Field muss eine Zahl seinMuss Negative zulassen-Allow 0.00 als ZahleneingabeIdeally würde type = "number" verwenden, aber "type = text" ist in OrdnungSie sollten in der Lage sein, das Feld zu leeren.

Der ng-Währungsfilter erfüllt diese Anforderungen so wie er ist nicht. Bitte sehen Sie sich das Verhalten in Plunkern an, um zu sehen, was ich meine.

MyFirst Plunker hat `input = text 'und erlaubt negative Zahlen. Ein Problem ist, dass Sie als allererste Zahl kein Negativ eingeben können. Wenn Sie das Feld löschen, wird wieder '0.00' angezeigt, es sollte jedoch vollständig gelöscht werden.

   app.directive('format', ['$filter', function ($filter) {
 return {
            require: 'ngModel', //there must be ng-model in the html
            link: function (scope, elem, attr, ctrl) {
                if (!ctrl) return;

                ctrl.$parsers.unshift(function (viewValue, modelValue) {
                    var plainNumber = viewValue.replace(/[^-+0-9]/g,'');
                    var newVal = plainNumber.charAt(plainNumber.length-1);
                    var positive = plainNumber.charAt(0) != '-';
                    if(isNaN(plainNumber.charAt(plainNumber.length-1))){
                      plainNumber = plainNumber.substr(0,plainNumber.length-1)
                    }
                    //use angular internal 'number' filter
                    plainNumber = $filter('number')(plainNumber / 100, 2).replace(/,/g, '');
                    if(positive && newVal == '-'){
                      plainNumber = '-' + plainNumber;
                    }
                    else if(!positive && newVal == '+'){
                      plainNumber = plainNumber.substr(1);
                    }
                    plainNumber.replace('.', ',');

                    //update the $viewValue
                    ctrl.$setViewValue(plainNumber);
                    //reflect on the DOM element
                    ctrl.$render();
                    //return the modified value to next parser
                    return plainNumber;
                });
            }
        };

}]);

MySecond Plunker hatinput = text und ermöglicht negative Eingabe. Wie der erste Plunker erlaubt es kein Negativ als erstes Zeichen, nur nachdem Zahlen eingegeben wurden. Das zweite ist, dass es an der zehnten Stelle anstelle der Hundertstel beginnt. (Wenn Sie '3' eingeben, sollte '0.03' angezeigt werden, hier jedoch '0.3')

app.directive('inputRestrictor', [function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModelCtrl) {
            var pattern = /[^.0-9+-]/g;

            function fromUser(text) {
                if (!text)
                return text;

                var rep = /[+]/g;
                var rem = /[-]/g;
                rep.exec(text);
                rem.exec(text);

                var indexp = rep.lastIndex;
                var indexm = rem.lastIndex;
                text = text.replace(/[+.-]/g, '');
                if (indexp > 0 || indexm > 0) {
                    if (indexp > indexm) text = "+" + text; // plus sign?
                    else text = "-" + text;
                }

                var transformedInput = text.replace(pattern, '');
                transformedInput = transformedInput.replace(/([0-9]{1,2}$)/, ".$1")
                ngModelCtrl.$setViewValue(transformedInput);
                ngModelCtrl.$render();
                return transformedInput;
            }

            ngModelCtrl.$parsers.push(fromUser);
        }
    };
}]);

Wie kann ich diese Lösungen abstimmen oder eine auf die Anforderungen zuschneiden? Ich möchte zusätzliche Bibliotheken oder Add-Ons vermeiden. Mir wurde gesagt, dass der beste Ansatz darin besteht, die Quelle für den Währungsfilter zu untersuchen und diesen Filter mit den zusätzlichen Anforderungen neu zu erstellen. Ich würde dies gerne tun, aber ich habe im Moment wirklich nicht die Fähigkeiten dafür. Diese beiden Anweisungen habe ich.