AngularJS：ng-repeat内输入框结合ng-change时外部总价不更新问题

嘿，我之前做AngularJS项目时也碰到过一模一样的问题！这其实是AngularJS的脏检查机制没及时捕捉到数组内部属性变化导致的，下面给你几个实用的解决办法：

方法一：用$watch深度监听数组变化 #

这是最常用的方案，通过深度监听你的选项数组，只要数组里任意一个item的price变化，就自动重新计算总和。在控制器里添加这段代码：

// 假设你的ng-repeat遍历的是$scope.options数组
$scope.options = [
  { price: 10 },
  { price: 20 },
  // 其他选项...
];
$scope.totalPrice = 0;

// 第三个参数设为true开启深度监听，才能检测到对象内部属性的变化
$scope.$watch('options', function(newOptions) {
  $scope.totalPrice = newOptions.reduce(function(total, item) {
    // 用parseFloat确保是数字，避免字符串拼接问题
    return total + parseFloat(item.price || 0);
  }, 0);
}, true);

解释一下：默认的$watch是浅监听，只会检测数组的引用是否变化（比如新增/删除元素），但不会管数组里对象的属性改动。加上第三个参数true后，就会递归检查数组内部的所有属性变化啦。

方法二：把总和计算做成模板调用的函数 #

如果你觉得$watch有点麻烦，可以直接在模板里调用计算函数，AngularJS会在每次脏检查时自动执行它更新总和。

控制器里定义计算函数：

$scope.calculateTotal = function() {
  return $scope.options.reduce(function(total, item) {
    return total + parseFloat(item.price || 0);
  }, 0);
};

然后在模板的总和展示处写：

<p>总价：{{ calculateTotal() }}</p>

⚠️ 小提醒：如果你的选项数组特别大，这个方法可能会有点性能损耗，因为每次脏检查都会跑一遍reduce。但一般中小型数据量完全没问题。

方法三：用ng-change主动触发更新 #

还有个更直观的方式，就是在每个ng-repeat里的输入框上加上ng-change指令，每次修改输入值时主动调用总和更新函数。

模板里的输入框：

<div ng-repeat="option in options">
  <input type="number" ng-model="option.price" ng-change="updateTotal()">
</div>

控制器里定义更新函数：

$scope.updateTotal = function() {
  $scope.totalPrice = $scope.options.reduce(function(total, item) {
    return total + parseFloat(item.price || 0);
  }, 0);
};

这个方法的好处是只有在用户实际修改值时才会计算总和，性能更优，逻辑也一目了然。

额外注意点 #

• 确保item.price是数字类型：如果输入的是字符串，一定要用parseFloat或者Number()转成数字，不然会变成字符串拼接（比如"10"+"20"会得到"1020"而不是30）。
• 如果你的ng-repeat里有动态增删元素的情况，上面的方法也都能适配，不用担心总和漏算。

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