带有ng-model的输入框中的Angularjs货币格式:如何在每个输入上触发$ formatters

Question

我到处寻找这个.每个堆栈溢出都有一个答案,它实际上不起作用.与包含文档的角度的任何示例或google组示例相同.

看似简单.我希望在用户按下的每个键的输入上调用函数.

使用ng-model进行简单输入

<input class="form-control" ng-model="model.thisisnotfun" formatter type="text" required>

根据我读到的一切.$ formatters应该将模型中的值更新为调用$ formatters数组中任何函数的视图.当我输入输入框时,它们永远不会被调用.

.directive('formatter', function ($filter, $parse) {
    return {
        require: 'ngModel',

        link: function (scope, element, attrs, ngModel) {

            ngModel.$formatters.push(
                function (value) {
                    console.log('this only gets called on page load');
                }
            );
        }
    };
})

我知道有很多自定义方法可以做到这一点,我已经做过了.我不需要解决方法,我只想知道如何正确使用$ formatters来"格式化"视图数据.

非常非常简单的jsfiddle http://jsfiddle.net/fh7sB/4/

谢谢你的帮助.

Answer 1

我无法让$ formatters函数像我想要的那样工作.我也找不到一个我在哪里寻找的例子,所以我会发布我的答案以防有人需要它.

这是使用ng-model在输入框中格式化我们货币的指令

    .directive('uiCurrency', function ($filter, $parse) {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs, ngModel) {

            function parse(viewValue, noRender) {
                if (!viewValue)
                    return viewValue;

                // strips all non digits leaving periods.
                var clean = viewValue.toString().replace(/[^0-9.]+/g, '').replace(/\.{2,}/, '.');

                // case for users entering multiple periods throughout the number
                var dotSplit = clean.split('.');
                if (dotSplit.length > 2) {
                    clean = dotSplit[0] + '.' + dotSplit[1].slice(0, 2);
                } else if (dotSplit.length == 2) {
                    clean = dotSplit[0] + '.' + dotSplit[1].slice(0, 2);
                }

                if (!noRender)
                    ngModel.$render();
                return clean;
            }

            ngModel.$parsers.unshift(parse);

            ngModel.$render = function() {
                console.log('viewValue', ngModel.$viewValue);
                console.log('modelValue', ngModel.$modelValue);
                var clean = parse(ngModel.$viewValue, true);
                if (!clean)
                    return;

                var currencyValue,
                    dotSplit = clean.split('.');

                // todo: refactor, this is ugly
                if (clean[clean.length-1] === '.') {
                     currencyValue = '$' + $filter('number')(parseFloat(clean)) + '.';

                } else if (clean.indexOf('.') != -1 && dotSplit[dotSplit.length - 1].length == 1) {
                    currencyValue = '$' + $filter('number')(parseFloat(clean), 1);
                } else if (clean.indexOf('.') != -1 && dotSplit[dotSplit.length - 1].length == 1) {
                    currencyValue = '$' + $filter('number')(parseFloat(clean), 2);
                } else {
                     currencyValue = '$' + $filter('number')(parseFloat(clean));
                }

                element.val(currencyValue);
            };

        }
    };
})

Answer 2

在$formatters当名为get 模型,以格式化的值被更新以呈现给用户.该$parsers反其道而行之,即翻译从视图字符串到真实模型的值,例如一个数字.

在这里分叉小提琴:http://jsfiddle.net/9tuCz/按下按钮; 它改变模型并$formatters再次发射.