当然可以实现这个需求！在AngularJS中，我们可以通过自定义指令来完美解决——既能让输入框显示带空格分隔的千位格式提升可读性，又能保证绑定的ngModel值始终是数字类型，不影响后续的业务逻辑处理。

核心思路 #

原生的type="number"输入框不允许输入空格这类非数字字符，所以我们需要把输入框类型改成text，然后通过指令完成三件关键事：

1. 把模型中的数字值格式化为带千位空格分隔的字符串，展示在输入框中
2. 把用户输入的带空格字符串转换回纯数字，同步到模型中
3. 做输入验证，确保用户只能输入有效数字

完整实现代码 #

首先在你的AngularJS模块中定义自定义指令：

angular.module('yourAppModule')
.directive('numberWithSpaces', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // 把模型值格式化为视图显示的带空格格式
      ngModel.$formatters.push(function(value) {
        if (!value || isNaN(value)) return '';
        // 正则匹配千位位置插入空格
        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
      });

      // 把视图输入的带空格字符串转换成纯数字
      ngModel.$parsers.push(function(value) {
        if (!value) return null;
        // 移除所有空格后转换为数字
        var cleanValue = value.replace(/\s/g, '');
        var numericValue = parseInt(cleanValue, 10);
        // 转换失败则返回null，触发验证错误
        return isNaN(numericValue) ? null : numericValue;
      });

      // 添加验证规则：确保输入为有效数字
      ngModel.$validators.validNumber = function(modelValue, viewValue) {
        var value = modelValue || viewValue;
        return !value || (!isNaN(value) && typeof value === 'number');
      };

      // 监听输入事件，实时格式化显示内容
      element.on('input', function() {
        var currentValue = element.val();
        var cleanValue = currentValue.replace(/\s/g, '');
        if (!cleanValue) {
          element.val('');
          return;
        }
        var formattedValue = cleanValue.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
        if (formattedValue !== currentValue) {
          element.val(formattedValue);
        }
      });
    }
  };
});

然后在HTML中使用这个指令替换原来的数字输入框：

<input type="text" ng-model="requisite.values.cost" number-with-spaces>

效果说明 #

• 当requisite.values.cost的值为1000000时，输入框会自动显示为1 000 000
• 用户输入数字时，输入框会实时添加千位空格分隔（比如输入1234567，会逐步变成1 234 567）
• 模型中存储的始终是纯数字（比如1000000），不会影响后续的计算或接口请求
• 如果用户输入非数字内容，指令会触发验证错误，你可以通过ng-show等指令提示用户输入有效数字

额外适配：支持小数千位分隔 #

如果需要处理带小数的数字，只需要调整格式化的正则表达式即可：

return value.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ' ');

这样就能把1234567.89格式化为1 234 567.89。

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