Angular中使用currency格式化输入框后无法编辑问题求助

这个问题我之前也碰到过！核心原因是你直接把currency过滤器挂在ng-model上了——Angular的过滤器默认是单向转换：它能把模型里的数字转成漂亮的货币字符串显示，但反过来，当你在输入框里修改这个带符号、千分位的字符串时，Angular没办法自动把它解析回原始数字存回模型，所以输入就失效了。

给你两个常用的解决方案，按需选择：

方案一：自定义双向货币输入指令（推荐，支持实时格式化） #

写一个自定义指令来处理双向转换：模型数字→显示货币字符串，输入字符串→模型数字。

先在你的Angular模块里添加这个指令：

angular.module('yourApp').directive('currencyInput', ['$filter', function($filter) {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      // 把模型值格式化成货币字符串显示
      ngModelCtrl.$formatters.push(function(modelValue) {
        if (!modelValue) return '';
        // 用传入的货币符号，默认£
        return $filter('currency')(modelValue, attrs.currencySymbol || '£', 2);
      });

      // 把输入的字符串解析成数字存回模型
      ngModelCtrl.$parsers.push(function(viewValue) {
        if (!viewValue) return null;
        // 移除所有非数字、非小数点的字符（比如£、逗号）
        var cleanValue = viewValue.replace(/[^0-9.]/g, '');
        // 转成数字，空值返回null
        return parseFloat(cleanValue) || null;
      });

      // 失去焦点时重新格式化，确保显示统一
      element.bind('blur', function() {
        var formatted = $filter('currency')(ngModelCtrl.$modelValue, attrs.currencySymbol || '£', 2);
        element.val(formatted);
      });
    }
  };
}]);

然后在HTML里替换成这个指令：

<input class="form-control" name="policyNet" type="text" 
       ng-model="QuoteEngineController.policyEngine.netPrem"
       currency-input currency-symbol="{{QuoteEngineController.currency}}" />

这个指令的好处是：用户输入时会自动清理无效字符，失去焦点后自动格式化，同时模型里始终存储原始数字，不影响后续计算。

方案二：分开显示/编辑状态（简单场景适用） #

如果不需要实时格式化输入，可以用“点击编辑”的模式：平时显示格式化后的文本，点击后切换成纯数字输入框，失去焦点再切回去。

<div ng-if="!editingNetPrem">
  <!-- 显示格式化后的货币，点击进入编辑 -->
  <span ng-click="editingNetPrem = true" style="cursor: pointer;">
    {{QuoteEngineController.policyEngine.netPrem | currency : QuoteEngineController.currency : 2}}
  </span>
</div>
<div ng-if="editingNetPrem">
  <!-- 编辑时用数字输入框，绑定原始模型值 -->
  <input class="form-control" name="policyNet" type="number" 
         ng-model="QuoteEngineController.policyEngine.netPrem"
         ng-blur="editingNetPrem = false" />
</div>

这种方法代码更少，适合用户不需要边输入边看格式化效果的场景，type="number"还能限制用户输入非数字内容。

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