将货币filter应用于angularjs中的输入字段
嗨，当我使用span标签时，我可以应用货币filter
{{item.cost | currency}} 我想知道如何在输入标签中应用相同的货币filter。 即
当我尝试将货币filter应用于输入字段时，它不起作用。 请告诉我如何将货币filter应用于输入字段。 谢谢
我创建了一个处理格式输入字段的简单指令。 这是一个jsfiddle的例子。 要使用它，请将其添加到现有代码中。
并将此指令添加到您的代码中。
// allow you to format a text input field. // // .directive('format', ['$filter', function ($filter) { return { require: '?ngModel', link: function (scope, elem, attrs, ctrl) { if (!ctrl) return; ctrl.$formatters.unshift(function (a) { return $filter(attrs.format)(ctrl.$modelValue) }); elem.bind('blur', function(event) { var plainNumber = elem.val().replace(/[^\d|\-+|\.+]/g, ''); elem.val($filter(attrs.format)(plainNumber)); }); } }; }]);
遗憾的是，您无法使用ng-model格式化。 至少不那样。 您将需要创建自己的指令来实现解析器和格式化程序。 这是一个类似的问题 。
目前有一个非常好的指令： ngmodel-format
Example - example-example52-production
default currency symbol ($): {{amount | currency}}
custom currency identifier (USD$): {{amount | currency:"USD$"}}
我认为您不需要在输入中应用filter，因为在您的输入中您不需要格式化货币，请查看此页面https://docs.angularjs.org/api/ng/filter/currency这是角度货币filter的官方帮助。
如果您使用的是bootstrap，可以使用其中一个控件http://getbootstrap.com/components/#input-groups-basic我希望这有帮助。
您可以创建指令并在值和模糊上应用格式，您可以将该格式化值设置为输入。
angular.module('app', []) .controller('myCtrl', function($scope) { $scope.amount = 2; }) .directive('formatToCurrency', function($filter){ return { scope: { amount : '=' }, link: function(scope, el, attrs){ el.val($filter('currency')(scope.amount)); el.bind('focus', function(){ el.val(scope.amount); }); el.bind('input', function(){ scope.amount = el.val(); scope.$apply(); }); el.bind('blur', function(){ el.val($filter('currency')(scope.amount)); }); } } });
链接http://jsfiddle.net/moL8ztrw/3/
我写了这个指令，它帮助我格式化货币值。 我希望它对某人有帮助。
.directive('numericOnly', function(){ return { require: 'ngModel', link: function(scope, element, attrs, modelCtrl) { var regex = /^[1-9]\d*(((.\d{3}){1})?(\,\d{0,2})?)$/; modelCtrl.$parsers.push(function (inputValue) { var transformedInput = inputValue; if (regex.test(transformedInput)) { console.log('passed the expression...'); modelCtrl.$setViewValue(transformedInput); modelCtrl.$render(); return transformedInput; } else { console.log('did not pass the expression...'); transformedInput = transformedInput.substr(0, transformedInput.length-1); modelCtrl.$setViewValue(transformedInput); modelCtrl.$render(); return transformedInput; } }); } }; });