web-dev-qa-db-ja.com

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

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

Keypressで機能させるにはどうすればよいですか（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 || ''));
            });

        }
    };
}]);
javascriptjqueryangularjsinput
31
Jon Snow

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

その助けを願っています

50
Maxim Shoustin

このモジュールは私にとってはうまく機能します。

https://github.com/assisrafael/angular-input-masks

例：

<input type="text" name="field" ng-model="number" ui-number-mask>
5
Abel

この質問に対する答えとして、以下のマキシムショースティンの答えを少し編集します。 AngularJSフォーマッタ-ゼロではなく空白を表示する方法

唯一の変更は、最後の番号の削除時に入力がゼロではなく空白になるようにすることです。

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

http://jsfiddle.net/2n73j6rb/

1
Andrew