AngularJS Richtlinie Numerischen Format Maskierung

In der Richtlinie die ich erstellt habe, verwendet die Funktion setFormatting Maske wird der text-Wert in ein input-Feld.

scope.$watch(element, function() {
    modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol));
    modelCtrl.$render();
});

element.bind('blur', function() {
    modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol));
    modelCtrl.$render();
});

Dem scope.$beobachten gilt die Maske, wenn der Inhalt geladen ist, angewendet wird, das erste mal, das element.binden, gilt die Maske für die anderen Zeiten. Die scope.$Uhr ist die Speicherung das symbol (wenn es eine ist) als Teil der ng-Modell-Variablen. Das element.binden ist nicht. Ich dachte, $setViewValue() und $render() nicht aktualisiert das ng-Modell-Variablen. Wo ist die variable aktualisiert?

Siehe beigefügte fiddle: http://jsfiddle.net/PJ3M4/

Dank.

in einfachen Worten tun, die Sie hinzufügen möchten Kommas und ° während der Eingabe ins input-Feld?
Ja, nur in das Eingabefeld ein. Aber diese Richtlinie wird verwendet für verschiedene Symbole, nicht nur das ° - symbol.

InformationsquelleAutor C1pher | 2013-11-08

  1. 16

    Hier haben wir $formatters.unshift und $filter:

    AngularJS Richtlinie Numerischen Format Maskierung

    JS

    var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {
    $scope.test = 123456879;
});
fessmodule.$inject = ['$scope'];

fessmodule.directive('format', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;

            var symbol = "°"; //dummy usage

            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.format)(ctrl.$modelValue) +  symbol;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
                elem.val($filter('number')(plainNumber) + symbol);
                return plainNumber;
            });
        }
    };
}]);

    HTML

     <input type="text" ng-model="test" format="number"/>

    Demo Fiddle

    Als eine Randnotiz

    Finden Sie diese auch hilfreich: Fiddle

    C!pher, Maxim ' s Antwort ist sehr gut gemacht und die deklarative Methode der using-Direktiven ist ein tolles Konzept, ich würde empfehlen, die Auswahl seiner Antwort. Alle die besten.
    Danke @Maxim. Genau das, was ich will. In Fall erhalten Sie einige Zeit können Sie bitte helfen Sie mit einer Erläuterung des Codes wird es Ihnen helfen newbie wie mich :). Nochmals vielen Dank.
    Hi maxim, ich mag deine Antwort aber ich habe eine Sorge. Wenn ich versuche, Bearbeiten Sie die Eingangs-Nummer, der cursor geht zurück auf die Letzte Zahl.

    InformationsquelleAutor Maxim Shoustin

  2. 1

    Den $watch ausgeführt wird, in einem 'digest' - Schleife. Die element.bind callback wird aufgerufen, von außen gewinkelt, so dass Sie müssen hinzufügen, ein expliziter Aufruf scope.$apply():

    element.bind('blur', function() {
    modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol));
    modelCtrl.$render();
    scope.$apply();
});

    Aktualisiert fiddle

    Finden Sie in der Dokumentation für Informationen über AngularJS - event-Schleife.

    Ich wollte speichern, der Wert der Zahl wird in der variable, nicht die Maske Wert.
    Dann sollten Sie eine filter, um die Anzeige de Wert. Die $watch Funktion ist nach dem digest-Schleife, während Ihr element.bind-Aufruf bricht der Daten-Bindung.
    Siehe @MaximShoustin Antwort für ein filter-Beispiel.

    InformationsquelleAutor rvignacio

  3. 1

    Können Sie auch einfach 

    ui-mask="{{'999,999,999°'}}"
    ui-Maske ist die Dritte Richtlinie. Es ist nicht eckig native.
    Zumindest bieten die 3rd-party-Richtlinie-website.

    InformationsquelleAutor

  4. 0

    War ich in der Lage zu Holen Sie sich die ng-model zum speichern der Werte, wie ich wollte, um durch das hinzufügen einer modelCtrl.$Parser.schieben() { ... } zu meine scope.$watch() { ... }. 

    scope.$watch(element, function() {
    modelCtrl.$parsers.push(function(inputValue) {
        showAlert("Watch", 1);

        if (!prev) {
            prev = false;
            var returnVal = checkVal(inputValue, modelCtrl, decimals, true, minVal, maxVal);

            if (String(returnVal) === ".") {
                setAndRender(modelCtrl, "");
                return "";
            }
            else {
                return returnVal;
            }
        }
        return String(inputValue).replace(/[^0-9 . -]/g, '');
    });

    prev = true;
    setAndRender(modelCtrl, setFormatting(element.val(), decimals, attrs.prefix, attrs.symbol));
});

    InformationsquelleAutor C1pher

Schreibe einen Kommentar