使用 AngularJS 指令格式化输入字段，同时保持范围变量不变 [英] Using AngularJS directive to format input field while leaving scope variable unchanged

问题描述

我在格式化输入字段时遇到问题，同时保留未格式化的基础范围变量.

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

我遇到了 $parsers 和 $formatters 这似乎是我正在寻找的东西.不幸的是，它们并没有相互影响(这实际上可能有助于避免无限循环).

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

HTML:

<input type="text" data-currency="" data-ng-model="data"/><div>模型:{{data}}</div>

JS:

var app = angular.module("app", []);功能Ctrl($范围){$scope.data = 1234567;}app.directive('货币', function() {返回 {限制:'A'，要求:'ngModel'，链接:函数(范围、元素、属性、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"), ''));});}};});

同样，这只是一个简单的例子.当它加载时，一切看起来都像它应该的那样.输入字段已格式化，而变量未格式化.但是，当更改输入字段中的值时，它不再格式化自身 - 但是变量会正确更新.

有没有办法确保文本字段被格式化而变量没有被格式化?我想我正在寻找的是文本字段的过滤器，但我看不到任何东西.

最好的问候

解决方案

这里有一个小提琴，展示了我如何在我的应用程序中实现完全相同的行为.我最终使用 ngModelController#render 而不是 $formatters，然后添加一组单独的行为，触发 keydown 和 change 事件.

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

I'm having an issue formatting an input field, while leaving the underlying scope variable non-formatted.

What I want to achieve is a text field to display currency. It should format itself on the fly, while handling wrong input. I got that working, but my problem is that I want to store the non-formatted value in my scope variable. The issue with input is that it requires a model which goes both ways, so changing the input field updates the model, and the other way around.

I came upon $parsers and $formatters which appears to be what I am looking for. Unfortunately they are not affecting each other (which might actually be good to avoid endless loops).

I've created a simple jsFiddle: http://jsfiddle.net/cruckie/yE8Yj/ and the code is as follows:

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

Again, this is just a simple example. When it loads everything looks as it's supposed to. The input field is formatted and the variable is not. However, when changing the value in the input field it no longer formats itself - the variable however gets updated correctly.

Is there a way to ensure the text field being formatted while the variable is not? I guess what I am looking for is a filter for text fields, but I can't seen to find anything on that.

Best regards

解决方案

Here's a fiddle that shows how I implemented the exact same behavior in my application. I ended up using ngModelController#render instead of $formatters, and then adding a separate set of behavior that triggered on keydown and change events.

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

这篇关于使用 AngularJS 指令格式化输入字段，同时保持范围变量不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！