☰

Angularjsで入力値をフォーマットする 質問する

tag-icon • tag-icon javascript jquery angularjs input
Angularjsで入力値をフォーマットする 質問する

数値を自動的にフォーマットするディレクティブを記述しようとしています<input>が、モデルがフォーマットされていません。 動作させることは問題なく、ロード時に入力の値はコントローラーで 1,000,000 および 1000000 として表示されますが、入力時にのみ関数が実行されますngModel.$parsers。 実行ngModel.$formattersされるのは、ディレクティブがロードされ、値が 0 のときのみです。

どうすればキープレスで動作させることができますか(keypress/keyup にバインドしてみましたが、動作しません)。

これが私のコードです:

angular.module('myApp.directives', []).directive('filterInput', ['$filter', function($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {

            ngModel.$parsers.push(function fromUser(text) {
                return parseInt(text.replace(",", ""));
            });

            ngModel.$formatters.push(function toUser(text) {
                console.log($filter('number')(text));
                return ($filter('number')(text || ''));
            });

        }
    };
}]);

ベストアンサー1

以下は、以下を使用する実例ですunshift。

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


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


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

HTML は次のようになります:

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

デモを見るFiddle

役に立つことを願う

おすすめ記事