在AngularJS中的数字输入上使用自定义货币字段答案

【问题标题】：Using a custom currency field on numerical input in AngularJS在AngularJS中的数字输入上使用自定义货币字段
【发布时间】：2018-03-26 21:19:57
【问题描述】：

我正在使用此线程中“最佳答案”中显示的货币过滤器：Apply currency filter to the input field in angularjs

问题是，我还需要输入字段只能是数字，即 type="number"。它与 type="text" 完美配合，但是当我尝试将两者结合时，当文本框失去焦点时输入消失。

<div class="table-cell">
    <div class="field-label table-cell">Estimated Yearly<br />Savings</div>
    <input ng-model="model.yearlySavings" type="number" format="currency">
</div>

JS：

mainModule.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));
        });
    }
};
}]);

注意：我会在那个帖子中发表评论，但我没有足够的“代表”来发表评论......

【问题讨论】：

此过滤器将输入格式化为字符串。如果您将输入的类型更改为数字，您所说的是输入字段必须期望一个数字，但是通过应用此过滤器，您可以将该字段的值更改为一个字符串，该字符串不能转换为数字，因为它包含 $和 '，'。您希望它是一个数字有什么特别的原因吗？

标签： angularjs input currency formatter

【解决方案1】：

我最终使用了来自另一个 SO 线程的自定义格式化程序：AngularJS - How to apply currency filter on textbox as I type?

指令名为 fcsa-number:https://github.com/FCSAmericaDev/angular-fcsa-number

这需要一些技巧，但我让它像这样工作：

<input ng-model="model.yearlySavings" name="ys" type="text" 
    ng-class="{ 'error': formName.ys.$invalid }" fcsa-number="{ prepend: '$', preventInvalidInput: true, maxDecimals: 2 }">

当列出的元素（在本例中为“yearlySavings”又名“ys”）无效时，“ng-class”位用于将边框动态设置为红色。在这个例子中，它在我的输入前加上“$”，它完全防止输入无效输入（如常规文本字符），并将最大小数设置为 2。奇怪的是，它不会阻止 3+ 小数像我期望的那样输入（如常规文本字符），但它确实使超过 2 的元素无效。

【讨论】：

【解决方案2】：

如下创建指令

HTML

  <div ng-app="myApp">
    <div ng-controller="myCtrl">
      {{amount}}
      <input format-to-currency amount="amount">
    </div>
  </div>

  angular.module('myApp', [])
    .controller('myCtrl', function($scope) {
      $scope.ampunt = 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/7/

【讨论】：