AngularJS中货币过滤器结合number类型输入框内容丢失问题

这个问题我在项目里遇到过好几次，核心矛盾其实很好理解——Angular对type="number"的输入框有严格的类型约束：绑定的ng-model必须是纯数字类型，但currency过滤器返回的是带货币符号、千分位逗号的字符串，这就导致视图显示的格式化内容和模型里的数字不匹配，失去焦点时Angular会判定这个字符串不是有效的数字，直接把输入框清空了。

下面给你两个实用的解决方案：

方案一：自定义指令分离视图显示与模型值（推荐） #

这个方法能同时保留type="number"的原生数字键盘（移动端友好）和货币格式化显示，模型里始终存纯数字，完美解决类型冲突问题。

先写一个自定义指令currencyInput：

angular.module('yourApp').directive('currencyInput', function($filter) {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      // 模型转视图：把数字格式化为货币字符串显示
      ngModelCtrl.$formatters.push(function(modelValue) {
        return $filter('currency')(modelValue);
      });

      // 视图转模型：把格式化后的字符串还原为纯数字
      ngModelCtrl.$parsers.push(function(viewValue) {
        // 移除所有非数字/小数点的字符
        var numericValue = viewValue.replace(/[^0-9.]/g, '');
        return numericValue ? parseFloat(numericValue) : null;
      });

      // 失焦时自动格式化显示
      element.bind('blur', function() {
        var formattedValue = $filter('currency')(ngModelCtrl.$modelValue);
        element.val(formattedValue);
      });

      // 聚焦时显示纯数字，方便用户编辑
      element.bind('focus', function() {
        element.val(ngModelCtrl.$modelValue || '');
      });
    }
  };
});

然后在HTML里直接使用这个指令：

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

方案二：改用type="text"并限制数字输入 #

如果不想写自定义指令，可以用type="text"配合输入限制，确保用户只能输入数字，同时保留货币格式化：

1. 先通过ng-pattern做格式验证，再加一个指令限制输入字符：

angular.module('yourApp').directive('numericOnly', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      // 实时过滤非数字字符
      element.bind('input', function() {
        var value = element.val().replace(/[^0-9.]/g, '');
        ngModelCtrl.$setViewValue(value);
        ngModelCtrl.$render();
      });
    }
  };
});

2. 然后在HTML中配置：

<div class="table-cell">
  <div class="field-label table-cell">Estimated Yearly<br />Savings</div>
  <input type="text" 
         ng-model="model.yearlySavings" 
         numeric-only 
         ng-value="model.yearlySavings | currency"
         ng-pattern="/^\d+(\.\d{1,2})?$/" />
</div>

ng-pattern用来限制只能输入整数或最多两位小数，numeric-only指令防止用户输入非数字字符，ng-value负责显示格式化后的货币。

内容的提问来源于stack exchange，提问作者Mike