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

Question

我有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> 

我想在以下字段中显示总和

<input type="text" id="txtTotalFx"  value= "{{ parseFloat(txtAmount1) + parseFloat(txtAmount2) + parseFloat(txtAmount3) + parseFloat(txtAmount4) + parseFloat(txtAmount5) }}"   />

，而maincontroler.js包含以下代码

app.controller("MainController", function($scope){
$scope.txtAmount1 = ""; 
$scope.txtAmount2 = ""; 
$scope.txtAmount3 = ""; 
$scope.txtAmount4 = ""; 
$scope.txtAmount5 = ""; 
$scope.parseFloat = parseFloat;
});

当用户填充所有输入字段txtAmount1到txtAmount5时，我只得到所需的结果，即如果用户不需要填充任何值并且它保持为空，那么txtTotalFx中的总和保持为空。

当表单加载时，如果web表单加载txtTotalFx字段时，我该怎么做才能使sum = 0显示为空。

Answer 1

如果将总值计算逻辑移动到控制器，则可以提高代码的可读性。所以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()" />

在控制器中：

$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;
};

如果您使用value，也不需要ng-model。

演示：http://plnkr.co/edit/VdEQDjnES3BjMo8iCxu7?p=preview

Answer 2

你不需要你输入的价值，因为你需要用ng-model绑定它们。这里的chalange是你想要在所有数字准备就绪时计算结果所以你需要观察其他结果和最简单的事情要做将输入模型提升为数组

$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>

接下来就是看你的阵列

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

并将您的业务逻辑放在那里......

我为你创建了一个plunker，你可以根据需要进行编辑......

PLUNKER

Answer 3

当未定义浮点数时，parseFloat返回NaN，因此添加失败。

创建你的函数parseFloat

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