使用AngularJS指令格式输入字段而留下范围的变量不变 [英] Using AngularJS directive to format input field while leaving scope variable unchanged

问题描述

我有格式化输入域的问题，同时使​​底层范围的变量未格式化。

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).

我创建了一个简单的jsfiddle： http://jsfiddle.net/cruckie/yE8Yj/ 和code是如下：

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.

最好的问候

推荐答案

下面是显示我是如何实现我的应用程序完全相同的行为小提琴。我结束了使用 ngModelController＃渲染而不是 $格式化，再加入一组独立的触发行为的keydown 和更改事件。

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屋！