如何使用Angular JS实现两个文本框求和并展示总金额？

当然有啦！这是AngularJS双向数据绑定的典型应用场景，我给你两种实用的实现方式，你可以根据自己的需求选择：

方式一：直接用AngularJS表达式实时计算 #

这种方式最简洁，不需要额外写复杂的控制器逻辑，直接在视图里通过表达式完成求和：

HTML 代码 #

<div ng-app="sumApp" ng-controller="sumController">
  <div>
    第一个数值：<input type="number" ng-model="num1" placeholder="输入数字">
  </div>
  <div>
    第二个数值：<input type="number" ng-model="num2" placeholder="输入数字">
  </div>
  <div>
    总金额：<input type="number" value="{{(parseFloat(num1) || 0) + (parseFloat(num2) || 0)}}" readonly>
  </div>
</div>

控制器代码 #

angular.module('sumApp', [])
  .controller('sumController', function($scope) {
    // 初始化变量，避免undefined导致的NaN问题
    $scope.num1 = 0;
    $scope.num2 = 0;
  });

关键点说明：

• 用type="number"的输入框可以限制用户输入非数字内容，减少类型转换的麻烦
• parseFloat(num1) || 0用来处理空值或非数字输入，防止出现NaN的异常显示
• 总金额输入框设置readonly，避免用户手动修改结果

方式二：在控制器中监听变量变化计算总和 #

如果后续需要扩展求和规则（比如加权重、加校验），可以把计算逻辑放在控制器里，通过$watch监听数值变化自动更新总和：

HTML 代码 #

<div ng-app="sumApp" ng-controller="sumController">
  <div>
    第一个数值：<input type="number" ng-model="num1" placeholder="输入数字">
  </div>
  <div>
    第二个数值：<input type="number" ng-model="num2" placeholder="输入数字">
  </div>
  <div>
    总金额：<input type="number" ng-model="total" readonly>
  </div>
</div>

控制器代码 #

angular.module('sumApp', [])
  .controller('sumController', function($scope) {
    // 初始化变量
    $scope.num1 = 0;
    $scope.num2 = 0;
    $scope.total = 0;

    // 同时监听num1和num2的变化，自动触发计算
    $scope.$watchGroup(['num1', 'num2'], function(newValues) {
      var num1 = parseFloat(newValues[0]) || 0;
      var num2 = parseFloat(newValues[1]) || 0;
      $scope.total = num1 + num2;
    });
  });

关键点说明：

• $watchGroup可以同时监听多个变量，只要num1或num2改变，就会自动重新计算总和
• 计算逻辑放在控制器里，视图只负责展示，符合MVVM的设计思想，后续修改规则更方便

两种方式都能实现你要的功能，第一种适合简单场景，第二种适合需要扩展的复杂场景，你可以按需选用~

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