如何在AngularJS中实现输入框数字显示追加%且不修改原属性值？

嘿，这个需求完全可以通过AngularJS的自定义指令实现，我给你写个完整的方案，一步步来：

核心思路是分离模型值和视图显示值：模型里始终存数字（比如4.32），视图根据焦点状态切换显示格式——失焦时带%，聚焦时只显示数字。我们可以通过ngModel的$formatters和$parsers来处理转换，再结合焦点事件控制显示逻辑。

第一步：创建自定义指令 #

在你的AngularJS模块中定义一个叫percentInput的指令：

angular.module('yourApp').directive('percentInput', function() {
  return {
    // 依赖ngModel控制器，用来操作模型和视图的值
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // 1. 格式化模型值为视图显示内容（失焦/初始化时）
      ngModel.$formatters.push(function(modelValue) {
        // 如果模型值是数字，就加上%返回给视图
        if (angular.isNumber(modelValue)) {
          return modelValue + '%';
        }
        return modelValue;
      });

      // 2. 解析视图输入值为模型值（用户输入时）
      ngModel.$parsers.push(function(viewValue) {
        // 去掉输入内容里的%，转成数字
        var numValue = viewValue ? parseFloat(viewValue.replace(/%/g, '')) : null;
        // 确保是有效数字才返回给模型，否则返回null
        return angular.isNumber(numValue) ? numValue : null;
      });

      // 3. 处理焦点事件：聚焦时显示纯数字
      element.on('focus', function() {
        var currentModelValue = ngModel.$modelValue;
        if (angular.isNumber(currentModelValue)) {
          // 直接设置输入框的值为纯数字
          element.val(currentModelValue);
        }
      });

      // 4. 处理失焦事件：失焦时重新应用格式化（显示带%的内容）
      element.on('blur', function() {
        // 调用ngModel的$render方法，触发$formatters转换
        ngModel.$render();
      });

      // 5. 监听模型值变化，确保初始化或模型更新时显示正确
      scope.$watch(function() {
        return ngModel.$modelValue;
      }, function(newValue) {
        // 只有当输入框没聚焦时，才重新渲染
        if (newValue !== undefined && !element.is(':focus')) {
          ngModel.$render();
        }
      });
    }
  };
});

第二步：在HTML中使用指令 #

把你的输入框加上percent-input指令即可：

<input type="text" ng-model="vm.someProperty" percent-input>

效果说明 #

• 页面初始化时：如果vm.someProperty是4.32，输入框会直接显示4.32%
• 用户点击输入框（聚焦）：输入框内容自动变成4.32，方便用户修改数字
• 用户修改完点击别处（失焦）：输入框会自动把修改后的数字加上%显示，比如输入5.67，失焦后显示5.67%，而vm.someProperty的值还是5.67（数字类型）

小提示 #

• 记得把代码里的yourApp换成你实际的AngularJS模块名称
• 如果需要处理非数字输入的情况，可以在$parsers里添加默认值逻辑（比如输入无效内容时模型值设为0）

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