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

前端之家收集整理的这篇文章主要介绍了使用AngularJS指令格式化输入字段,同时保持范围变量不变前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有格式化输入字段的问题,而使底层作用域变量未格式化。

我想要实现的是一个显示货币的文本字段。它应该在运行时格式化,同时处理错误的输入。我得到了这个工作,但我的问题是我想要存储我的范围变量中的非格式的值。输入的问题是它需要一种可以同时进行两种方式的模型,所以改变输入域会更新模型,反之亦然。

我来到了$ parser和$ 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"),''));
            });
        }
    };
});

再次,这只是一个简单的例子。当它加载所有的外观,因为它应该。输入字段被格式化,变量不是。但是,当更改输入字段中的值时,它不再自己格式化 – 但变量可以正确更新。

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

最好的祝福

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

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

原文链接:https://www.f2er.com/angularjs/144302.html

猜你在找的Angularjs相关文章