31

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

キープレスで動作させるにはどうすればよいですか (キープレス/キーアップにバインドしようとしましたが、動作しません)。

これが私のコードです：

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 || ''));
            });

        }
    };
}]);
4

4 に答える 4

5

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

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

例：

<input type="text" name="field" ng-model="number" ui-number-mask>
于 2015-08-21T00:31:08.617 に答える
1

この質問への回答に従って、以下の Maxim Shoustin の回答を少し編集します: 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/

于 2014-09-02T02:22:41.923 に答える