一尘不染

使用AngularJS指令格式化输入字段,同时保持范围变量不变

angularjs

我在格式化输入字段时遇到问题,而基础范围变量未格式化。

我要实现的是一个显示货币的文本字段。它应该在处理错误输入的同时即时格式化自己。我可以正常工作,但是我的问题是我要将非格式化值存储在我的范围变量中。输入的问题在于,它需要一个双向运行的模型,因此更改输入字段会更新该模型,反之亦然。

我来了$parsers$formatters这似乎是我想要的。不幸的是,它们并没有相互影响(实际上可能会避免无休止的循环)。

我创建了一个简单的jsFiddle:http :
//jsfiddle.net/cruckie/yE8Yj/,代码如下:

HTML:

<div data-ng-app="app" data-ng-controller="Ctrl">
    <input type="text" data-currency="" data-ng-model="data" />
    <div>Model: {{data}}</div>
</div>

JS:

var app = angular.module("app", []);

function Ctrl($scope) {
    $scope.data = 1234567;
}

app.directive('currency', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {

            ctrl.$formatters.push(function(modelValue) {
                return modelValue.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
            });

            ctrl.$parsers.push(function(viewValue) {
                return parseFloat(viewValue.replace(new RegExp(",", "g"), ''));
            });
        }
    };
});

同样,这只是一个简单的例子。当它加载时,一切看起来都像预期的那样。输入字段已格式化,变量未格式化。但是,在输入字段中更改值时,它不再自行格式化-
但是变量已正确更新。

有没有一种方法可以确保在不设置变量的情况下格式化文本字段?我猜我在寻找的是文本字段过滤器,但是我看不到任何内容。

最好的祝福


阅读 159

收藏
2020-07-04

共1个答案

一尘不染

这是一个小提琴,显示了我如何在应用程序中实现完全相同的行为。最后我用ngModelController#render的不是$formatters,再加入一组独立的行为,关于触发keydownchange事件。

http://jsfiddle.net/KPeBD/2/

2020-07-04