AngularJS控制器$watch中如何将字符串变量转为数字并求和？

你遇到的问题核心在于两点：一是$watch的第一个参数如果直接写计算式，只会执行一次初始计算，不会随着变量变化重新求值；二是你没有通过$scope访问对应的属性，而且缺少对空值的处理，容易出现NaN。

下面给你两种可行的解决方案：

方案一：使用函数作为$watch的监听源（推荐） #

这种方式更灵活，能清晰处理类型转换和边界情况：

<script>
function TodoCtrl ($scope) {
  // 先初始化变量，避免undefined引发问题
  $scope.form = $scope.form || { paymentmade: 0 };
  $scope.newpayment = $scope.newpayment || 0;

  $scope.$watch(function() {
    // 把值转为十进制整数，空值或非数字默认取0
    const paymentMade = parseInt($scope.form.paymentmade, 10) || 0;
    const newPayment = parseInt($scope.newpayment, 10) || 0;
    return paymentMade + newPayment;
  }, function (value) {
    $scope.form.paymentmade = value;
  });
}
</script>

说明： #

• 用函数作为$watch的第一个参数时，Angular每次脏检查都会执行这个函数，返回最新的求和结果，确保变量变化时能实时更新。
• parseInt加上第二个参数10是为了强制十进制解析，避免遇到以0开头的字符串被误判为八进制。
• 初始化变量和|| 0的处理，是为了防止paymentmade或newpayment为空、未定义时出现NaN的情况。

方案二：在Angular表达式中直接转换类型 #

如果偏好字符串表达式的写法，可以在表达式里用Number()做类型转换：

<script>
function TodoCtrl ($scope) {
  $scope.form = $scope.form || { paymentmade: 0 };
  $scope.newpayment = $scope.newpayment || 0;

  $scope.$watch('Number(form.paymentmade || 0) + Number(newpayment || 0)', function (value) {
    $scope.form.paymentmade = value;
  });
}
</script>

这种方式更简洁，但处理复杂逻辑时可读性不如函数式写法。

额外提醒 #

要确保$scope.form和$scope.newpayment在控制器初始化时就有值，不然可能会触发Cannot read property 'paymentmade' of undefined这类错误，上面的代码里已经加了初始化处理。

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