我在格式化输入字段时遇到问题,而基础范围变量未格式化。
我要实现的是一个显示货币的文本字段。它应该在处理错误输入的同时即时格式化自己。我可以正常工作,但是我的问题是我要将非格式化值存储在我的范围变量中。输入的问题在于,它需要一个双向运行的模型,因此更改输入字段会更新该模型,反之亦然。
我来了$parsers,$formatters这似乎是我想要的。不幸的是,它们并没有相互影响(实际上可能会避免无休止的循环)。
$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"), '')); }); } }; });
同样,这只是一个简单的例子。当它加载时,一切看起来都像预期的那样。输入字段已格式化,变量未格式化。但是,在输入字段中更改值时,它不再自行格式化- 但是变量已正确更新。
有没有一种方法可以确保在不设置变量的情况下格式化文本字段?我猜我在寻找的是文本字段过滤器,但是我看不到任何内容。
最好的祝福
这是一个小提琴,显示了我如何在应用程序中实现完全相同的行为。最后我用ngModelController#render的不是$formatters,再加入一组独立的行为,关于触发keydown和change事件。
ngModelController#render
keydown
change
http://jsfiddle.net/KPeBD/2/