Javascript 对angularjs中的两个以上字段求和，并在另一个字段中显示结果

我有5个要添加的输入数字字段。

<input type="number" id="txtAmount1" ng-model='txtAmount1' value="0.00" /></div>
<input type="number" id="txtAmount2" ng-model='txtAmount2' value="0.00" /></div>
<input type="number" id="txtAmount3" ng-model='txtAmount3' value="0.00" /></div>
<input type="number" id="txtAmount4" ng-model='txtAmount4' value="0.00" /></div>
<input type="number" id="txtAmount5" ng-model='txtAmount5' value="0.00" /></div> 

只有当用户填写所有输入字段txtAmount1到txtAmount5时，我才能得到所需的结果，即，如果用户不需要填写任何值，并且该值保持为空，则TXTOTALFX中的总和保持为空

---

当表单加载时，我应该如何使sum=0，而当前web表单加载时，txtTotalFx字段显示为空。

parseFloat在未定义浮点且因此加法失败时返回

NaN

创建函数parseFloat

$scope.parseFloat=function(val) {
    return isNaN(parseFloat(val)) ? 0: parseFloat(val);
}

---

若将总值计算逻辑移动到控制器，则可以提高代码的可读性。所以HTML应该是：

<input type="number" id="txtAmount1" ng-model='txtAmount1' /></div>
<input type="number" id="txtAmount2" ng-model='txtAmount2' /></div>
<input type="number" id="txtAmount3" ng-model='txtAmount3' /></div>
<input type="number" id="txtAmount4" ng-model='txtAmount4' /></div>
<input type="number" id="txtAmount5" ng-model='txtAmount5' /></div> 

<input type="text" id="txtTotalFx" ng-value="total()" />

另外，如果使用

ng model

，则不需要

value

---

演示：您的输入不需要值，因为您已经将它们与ng模型绑定。。这里的挑战是，当所有数字都准备好时，您需要计算结果，所以您需要观察其他结果，以及将输入模型提升到数组中的最简单操作

$scope.txtAmount = {1 : 0, 2 : 0, 3 : 0, 4 : 0, 5 : 0};

以及根据模型数组生成的html

<input type="number" id="txtAmount1" ng-model='txtAmount.1' /></div>
<input type="number" id="txtAmount2" ng-model='txtAmount.2' /></div>
<input type="number" id="txtAmount3" ng-model='txtAmount.3' /></div>
<input type="number" id="txtAmount4" ng-model='txtAmount.4' /></div>
<input type="number" id="txtAmount5" ng-model='txtAmount.5' /></div>

然后把你的业务逻辑放进去

我为你创建了一个plunker你可以编辑它如果你想

$scope.total = function() {
    var total = parseFloat($scope.txtAmount1 || 0) + parseFloat($scope.txtAmount2 || 0) +
                parseFloat($scope.txtAmount3 || 0) + parseFloat($scope.txtAmount4 || 0) + 
                parseFloat($scope.txtAmount5 || 0);
    return total || 0;
};

$scope.txtAmount = {1 : 0, 2 : 0, 3 : 0, 4 : 0, 5 : 0};

<input type="number" id="txtAmount1" ng-model='txtAmount.1' /></div>
<input type="number" id="txtAmount2" ng-model='txtAmount.2' /></div>
<input type="number" id="txtAmount3" ng-model='txtAmount.3' /></div>
<input type="number" id="txtAmount4" ng-model='txtAmount.4' /></div>
<input type="number" id="txtAmount5" ng-model='txtAmount.5' /></div>

$scope.$watch('txtAmount', function(newValue, oldValue) {...