AngularJS中keyup事件实现输入框求和及NaN问题与ng-model追踪

一、解决实时求和显示NaN的问题 #

出现NaN的核心原因是：当输入框为空时，对应的ng-model值是undefined或空字符串，直接和数字相加会触发JavaScript的类型转换错误，导致结果为NaN。我们只需要确保每个输入值都被转换为有效数字，空值默认按0处理即可。

这里提供两种常用方案：

方案1：在模板中直接处理值转换

可以在模板的求和表达式里，对每个ng-model值进行数字转换，空值用0兜底：

<div ng-app="sumApp" ng-controller="sumCtrl">
  <input type="number" ng-model="num1">
  <input type="number" ng-model="num2">
  <input type="number" ng-model="num3">
  <input type="number" ng-model="num4">
  <p>总和：{{ (Number(num1) || 0) + (Number(num2) || 0) + (Number(num3) || 0) + (Number(num4) || 0) }}</p>
</div>

Number()会把空字符串、undefined转换为NaN，再通过|| 0把NaN替换成0，这样就能保证任何时候相加都是有效数字运算。

方案2：在控制器中封装求和逻辑（更推荐，模板更简洁）

把求和逻辑放到控制器里，通过函数返回计算结果，同时可以统一处理值的转换：

angular.module('sumApp', [])
.controller('sumCtrl', function($scope) {
  // 初始化输入值为0，避免undefined
  $scope.num1 = 0;
  $scope.num2 = 0;
  $scope.num3 = 0;
  $scope.num4 = 0;

  // 计算总和的函数
  $scope.getTotal = function() {
    // 把每个值转为数字，空值默认0
    var n1 = parseFloat($scope.num1) || 0;
    var n2 = parseFloat($scope.num2) || 0;
    var n3 = parseFloat($scope.num3) || 0;
    var n4 = parseFloat($scope.num4) || 0;
    return n1 + n2 + n3 + n4;
  };
});

模板里直接调用函数即可：

<p>总和：{{ getTotal() }}</p>

这种方式还能方便后续扩展求和逻辑，比如添加输入验证等。

二、获知哪个输入框被输入（类似原生JS的this.value） #

在AngularJS中，我们可以通过ng-change指令绑定一个带标识参数的函数，来追踪哪个输入框触发了变化。具体做法如下：

1. 修改HTML模板，给每个输入框添加ng-change并传入标识

<input type="number" ng-model="num1" ng-change="onInputChange('num1', num1)">
<input type="number" ng-model="num2" ng-change="onInputChange('num2', num2)">
<input type="number" ng-model="num3" ng-change="onInputChange('num3', num3)">
<input type="number" ng-model="num4" ng-change="onInputChange('num4', num4)">

这里的第一个参数'num1'就是输入框的标识（对应ng-model的名称），第二个参数是当前输入框的值。

2. 在控制器中实现onInputChange函数

$scope.onInputChange = function(inputKey, inputValue) {
  console.log(`被修改的输入框是：${inputKey}`);
  console.log(`当前输入值是：${inputValue}`);
  // 这里可以根据inputKey做针对性处理，比如更新对应状态等
};

这样每次用户修改某个输入框时，就能精准知道是哪个输入框发生了变化，同时获取当前值，效果类似原生JS里的this.value，但更符合AngularJS的数据流模式。

如果需要更接近原生的“获取当前DOM元素”的需求，也可以在ng-change中传入$event对象：

<input type="number" ng-model="num1" ng-change="onInputChange($event)">

然后在控制器里：

$scope.onInputChange = function(event) {
  var target = event.target;
  console.log(`被修改的输入框ID/name：${target.name}`);
  console.log(`当前输入值：${target.value}`);
};

这种方式适合需要操作DOM元素的场景，但一般推荐第一种基于数据标识的方式，更符合AngularJS的MVVM思想。

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