AngularJS数字输入微调器手动输入后点击加号异常求助

嘿，这个问题我太熟了！大概率是输入框的值没被正确转换成数字类型搞的鬼，咱们一步步来解决：

问题根源 #

手动输入到输入框里的内容默认是字符串类型，当你点击加号时，如果直接执行value += 1，JavaScript会把这当成字符串拼接（比如输入"3"，就变成"31"）；但减号操作value -= 1不一样，减法运算会自动把字符串转成数字计算，所以减号能正常工作。而先点一次减号后，值已经被转成数字了，后续加号自然就正常了。

修复方案 #

方案1：在加减操作时强制转数字 #

找到你指令里处理加减的函数，把值先转成整数（或浮点数，根据你的需求）再计算：

// 替换原有的increment和decrement函数
scope.increment = function() {
  // 把当前值转成数字，空值或非数字时默认0
  const currentNum = parseInt(scope.inputValue, 10) || 0;
  scope.inputValue = currentNum + 1;
};

scope.decrement = function() {
  const currentNum = parseInt(scope.inputValue, 10) || 0;
  // 可以加个最小值限制，比如不能小于0
  scope.inputValue = Math.max(currentNum - 1, 0);
};

方案2：用ng-model确保值始终是数字 #

给输入框添加type="number"，再配合ng-model-options的getterSetter模式，从根源上保证绑定的值是数字类型：

1. 模板里的输入框：

<input 
  type="number" 
  ng-model="inputValue" 
  ng-model-options="{ getterSetter: true }"
  ng-pattern="/^[0-9]*$/"
>

2. 指令里定义getterSetter函数：

let _inputValue = 0; // 初始值

scope.inputValue = function(newVal) {
  if (angular.isDefined(newVal)) {
    // 设置值时强制转成数字，非数字则设为0
    _inputValue = parseInt(newVal, 10) || 0;
  }
  return _inputValue;
};

这样不管是手动输入还是点击加减，值都会保持数字类型，再也不会出现拼接字符串的问题啦！

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