Angular中数组绑定number输入框ng-model时前缀0问题求助

咱们先来理清问题根源：你的数字输入框绑定到数组元素vm.total_amount[$index]，但数组初始为空，Angular会自动把未定义的模型值转为0，再加上可能自定义指令的干扰，导致输入数字时无法覆盖初始的0，出现类似输入5显示05的情况。下面给你几个实用的解决办法：

1. 提前初始化数组元素为undefined #

核心思路是避免Angular自动给未定义的数组项填充0，手动把对应位置的元素设为undefined，让输入框初始为空。

控制器端处理（推荐） #

如果是通过ng-repeat生成输入框，在添加新输入项时，给数组push一个undefined：

// 示例：添加新输入框的方法
vm.addInputField = function() {
  vm.total_amount.push(undefined);
};

如果是固定数量的输入框，初始化时直接给数组对应位置赋值：

// 比如需要3个输入框
vm.total_amount = [undefined, undefined, undefined];

模板端用ng-init处理 #

在输入框所在的ng-repeat块里添加ng-init，确保数组项默认是undefined：

<div ng-repeat="item in vm.productList track by $index" 
     ng-init="vm.total_amount[$index] = vm.total_amount[$index] || undefined">
  <input stopccp decimalpoint type="number" 
         placeholder="{{'ededuction_message' | translate}} - {{ vm.singleproduct.selectedtype === 'piece' ? 'Pec' : 'Kg' }}" 
         ng-model="vm.total_amount[$index]" 
         id="field2">
</div>

2. 检查并修复自定义指令的输入逻辑 #

如果上面的方法没解决问题，大概率是stopccp或decimalpoint这两个自定义指令的问题——它们可能在处理输入事件时，没有替换整个值，而是在初始的0后面追加新输入的数字。

你可以检查指令代码，确保处理输入时是替换整个值而非追加。比如修正decimalpoint指令的示例：

.directive('decimalpoint', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      element.on('input', function() {
        // 过滤非法字符，只保留数字和小数点
        var cleanValue = element.val().replace(/[^0-9.]/g, '');
        // 强制替换视图值，而非追加
        ngModel.$setViewValue(cleanValue);
        ngModel.$render();
      });
    }
  };
});

3. 强制将模型值转为数字 #

通过ng-change或$watch监听模型变化，把值强制转为数字，避免字符串形式的前导零：

模板用ng-change处理 #

<input stopccp decimalpoint type="number" 
       placeholder="{{'ededuction_message' | translate}} - {{ vm.singleproduct.selectedtype === 'piece' ? 'Pec' : 'Kg' }}" 
       ng-model="vm.total_amount[$index]" 
       ng-change="vm.total_amount[$index] = Number(vm.total_amount[$index])"
       id="field2">

控制器用$watch批量处理 #

scope.$watchCollection('vm.total_amount', function(newValues) {
  if (newValues) {
    // 把空值转为undefined，非空值转为数字
    vm.total_amount = newValues.map(val => val === '' ? undefined : Number(val));
  }
});

这样处理后，输入框初始会是空的（而非0），输入数字时也会直接显示你输入的数值，不会再出现前缀0的问题啦～

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