基于Ionic框架的AngularJS输入字段自动计算总价的控制器改造

嘿，这个问题我熟！你现在的核心问题是：控制器里的$scope.c = $scope.a * $scope.b只会在控制器初始化的时候执行一次，当你在输入框里修改Price或Qty时，AngularJS不会自动重新计算c的值。要把计算逻辑完全放在控制器里，有两种简单可靠的方式：

方式一：使用$watchGroup监听输入变化（推荐） #

这种方式会主动监听a和b的变化，一旦它们的值改变，就自动重新计算总价。同时我们还会处理输入的类型转换（因为输入框是text类型，默认值是字符串，直接相乘会出问题）。

修改后的controller.js代码：

angular.module('starter.controllers', [])
  .controller('DashCtrl', function($scope) {
    // 初始化价格和数量为数字类型
    $scope.a = 0;
    $scope.b = 0;
    $scope.c = 0;

    // 监听a（Price）和b（Qty）的变化
    $scope.$watchGroup(['a', 'b'], function(newValues) {
      // 将输入的字符串转为数字，空值或非数字则设为0
      const price = parseFloat(newValues[0]) || 0;
      const quantity = parseFloat(newValues[1]) || 0;
      // 重新计算总价
      $scope.c = price * quantity;
    });
  });

然后修改form.html中的总价输入框，用ng-value实现实时绑定（加上readonly防止用户编辑）：

<label class="item item-input">
  <span class="input-label">Total</span>
  <input type="text" ng-value="{{ c | currency:'Rp ' }}" readonly>
</label>

方式二：把总价做成控制器中的函数 #

如果你觉得$watch太麻烦，也可以把计算逻辑封装成一个函数，在视图中调用它。这种方式会在AngularJS的每一次digest循环中重新计算，适合简单场景。

修改后的controller.js代码：

angular.module('starter.controllers', [])
  .controller('DashCtrl', function($scope) {
    $scope.a = 0;
    $scope.b = 0;

    // 定义计算总价的函数
    $scope.calculateTotal = function() {
      const price = parseFloat($scope.a) || 0;
      const quantity = parseFloat($scope.b) || 0;
      return price * quantity;
    };
  });

对应的form.html总价部分改成：

<label class="item item-input">
  <span class="input-label">Total</span>
  <input type="text" ng-value="{{ calculateTotal() | currency:'Rp ' }}" readonly>
</label>

关键细节说明 #

1. 类型转换：一定要把输入框的字符串值转成数字，否则如果用户输入非数字内容，会得到NaN（非法数字）的结果。parseFloat()配合|| 0可以处理空值、字母等异常输入。
2. 视图绑定：不要用原生的value属性，要用AngularJS的ng-value或者直接插值到元素内容里，这样才能实时更新。
3. 只读处理：总价是计算出来的，建议加上readonly属性或者直接用<span>显示，避免用户手动修改。

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