Eine Summe von mehr als zwei Felder in angularjs und zeigt das Ergebnis in einem anderen Feld

Ich habe 5 input number Felder, die ich hinzufügen möchten.

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

ich möchte die Anzeige der Summe in das folgende Feld

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

während der maincontroler.js enthalten folgenden code

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

bekomme ich nur das gewünschte Ergebnis, wenn alle input-Felder txtAmount1 zu txtAmount5 gefüllt Nutzers, d.h. wenn einer der Werte ist nicht erforderlich, um gefüllt werden und es dem Benutzer leer bleiben, dann ist die Summe in der txtTotalFx null bleibt.

was sollte ich tun, um sum = 0, wenn das Formular geladen wird, während Sie momentan bei dem web-Formular lädt die txtTotalFx Feld zeigt null.

InformationsquelleAutor afzal hussain | 2014-03-08

0

parseFloat zurück NaN wenn der Schwimmer ist nicht definiert und daher fehl.

Erstellen Ihre Funktion parseFloat
```
$scope.parseFloat=function(val) {
    return isNaN(parseFloat(val)) ? 0: parseFloat(val);
}
```
InformationsquelleAutor Chandermani

Können Sie verbessern die Lesbarkeit des Codes, wenn Sie Bewegung Gesamt Wert-Berechnung-Logik-controller. Also HTML wäre:

<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()" />

Und im controller:

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

Auch Sie brauchen nicht value wenn Sie ng-model.

Demo: http://plnkr.co/edit/VdEQDjnES3BjMo8iCxu7?p=preview

InformationsquelleAutor dfsq

1

brauchen Sie nicht Wert für Ihre Eingabe führen Sie alreayd binden Sie mit ng-model.. die chalange hier ist Sie zu berechnen, die sich ergeben, wenn alle die Nummer ist fertig, und so müssen Sie zusehen, wie andere Ergebnisse, die einfachsten Dinge zu tun, heben Sie Ihre Eingabe-Modelle in ein array
```
$scope.txtAmount = {1 : 0, 2 : 0, 3 : 0, 4 : 0, 5 : 0};
```
und Ihre html nach Ihrer model-array
```
<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>
```
nächste Sache, ist sehen Sie Ihre array
```
$scope.$watch('txtAmount', function(newValue, oldValue) {...
```
und stellen Sie Ihre business-Logik drin...

Erstellte ich eine plunker für Sie, können Sie es Bearbeiten, wenn Sie wollen...

PLUNKER

InformationsquelleAutor Poyraz Yilmaz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.