Wie summiere ich zwei Felder in AngularJS und zeige das Ergebnis in einem Label?

Lesezeit: 5 Minuten

Benutzer-Avatar
Aitiow

Ich habe eine Situation auf meiner Seite.

Ich habe zwei Eingaben und ein Label in meiner Seite. Diese Etiketten müssen die Summe dieser beiden Eingangswerte anzeigen.

Also habe ich folgende Lösung versucht:

Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ Property.Field1 + Property.Field2  }}</label>

Beim ersten Mal, wenn die Seite vollständig geladen ist, zeigt das Etikett die Summe an, aber wenn ich einen Wert in eine beliebige Eingabe eingebe,
Diese Lösung gibt mir ein CONCATENATION-Ergebnis von Property.Field1 und Property.Field2statt der Summe.

also habe ich diese probiert:

Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ parseFloat(Property.Field1) + parseFloat(Property.Field2)  }}</label>

kein erfolg wieder.

Wie könnte ich das Summenergebnis von zwei Eingaben erzielen, die auf dem Etikett angezeigt werden?

Benutzer-Avatar
ndm

Hast du eigentlich eine erstellt parseFloat Methode in Ihrem Controller? Weil Sie JS nicht einfach in Angular-Ausdrücken verwenden können, siehe Winkelausdrücke vs. JS-Ausdrücke.

function controller($scope)
{
    $scope.parseFloat = function(value)
    {
        return parseFloat(value);
    }
}

edit: es sollte auch möglich sein, einfach einen Verweis auf die ursprüngliche Funktion zu setzen:

$scope.parseFloat = parseFloat;

Ich würde auch erwarten, dass es mit Filtern funktioniert, aber leider nicht (möglicherweise ein Fehler, oder ich habe die Funktionsweise von Filtern missverstanden):

<label>{{ (Property.Field1|number) + (Property.Field2|number) }}</label>

Eine Problemumgehung wäre die Verwendung der Multiplikation für das Casting:

<label>{{ (Property.Field1 * 1) + (Property.Field2 * 1) }}</label>

  • Gerne … ich habe einen anderen Weg hinzugefügt, ich weiß nicht, warum ich nicht vorher darüber nachgedacht hatte, das Setzen einer Referenz sollte es auch tun.

    – ndm

    6. Oktober 2012 um 21:03 Uhr

  • Nur zu Ihrer Information, das ist die übliche Vorgehensweise value | 0 asm.js verwendet es zum Beispiel.

    – Vittor

    3. Juni 2013 um 15:07 Uhr

Benutzer-Avatar
Andrea Ligios

Das Kolumbus Ei ist: doppelte Verneinung.

Der Anfangswert ist 0 (statt null) und das Ergebnis ist eine Summe (statt einer Verkettung wegen der impliziten numerischen Umwandlung).

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app>  
  <input ng-model="first"  placeholder="First number"  type="text" />
  <input ng-model="second" placeholder="Second number" type="text" />
  <h1> Sum: {{first--second}}! </h1>
</div>

  • kannst du mich auch für dividieren und multipye vorschlagen.

    – jsdunija

    3. Juni 2014 um 6:21 Uhr

  • Zum Aufteilung und Multiplikationkönnen Sie einfach verwenden / und *; das problem mit der Summe war das die + wurde als Verkettungsoperator interpretiert, nicht als Summenoperator … -- hackt das 🙂 Für die Multiplikation kann man 0 zu den beiden Operatoren summieren um einen Nullwert am Anfang zu verhindern, für die Division muss man sich etwas anderes überlegen (auch für den Fall der Division durch 0 wenn das Feld mit 0 gefüllt ist) : jsfiddle.net/AndreaLigios/73gQR/17

    – Andrea Ligios

    3. Juni 2014 um 8:24 Uhr


  • Hallo, das funktioniert, aber es gibt ein Problem…. Ich muss ng-model auf ihnen verwenden, um ihre Werte zu speichern, aber wenn ich ng-model verwende, funktioniert es nicht richtig.

    – Chirag K

    13. April 2016 um 10:26 Uhr


  • – Chirag K

    13. April 2016 um 10:28 Uhr

  • Definiere “funktioniert nicht richtig”. Hast du ng-app auf den Container gelegt? Übrigens funktioniert das und antwortet Dies Frage, wenn Sie andere Probleme haben, sollten Sie eine neue Frage stellen @Stun_Gravy

    – Andrea Ligios

    13. April 2016 um 11:36 Uhr

Der einfachste und beste Weg, zwei Zahlen zu summieren, ist die Verwendung von HTML5 type="number". Wenn Sie dies tun, sind die Werte der Eingaben standardmäßig ganze Zahlen.

Geige aktualisiert

Sum in Angularjs
<div ng-app>
        <input type="text" ng-model="first" />
        <input type="text" ng-model="second" />
        Sum: {{first*1 + second*1}}
</div>

Benutzer-Avatar
arbeitssuchender_Angular

    <!DOCTYPE html>
    <html>
    <head>
    	<title>Angular Addition</title>
    	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    </head>
    <body>
    	<div ng-app="">
    		<p>First Number <input type="number"  ng-model="fnum"></p>
    		<p>Second Number <input type="number" ng-model="snum"></p>
    		<p>Total {{ (snum) + (fnum) }}</p>
    	</div>
    </body>
    </html>

Benutzer-Avatar
sonnig

Simple method for this :
Js file:
var myApp = angular.module('myApp', []);
myApp.controller("myCtrl", function ($scope) {
    $scope.sum = function (num1, num2) {
        $scope.addition = parseInt(num1) + parseInt(num2);
    }
});


html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" type="text/javascript"></script>

<head>
<script src="script.js" type="text/javascript"></script>
    <title></title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

Enter First Number:<input type="text" id="num1" ng-model="num1" /><br />
Enter Second Number:<input type="text" id="num2" ng-model="num2" /><br />
<input type="button" value="Sum" ng-click="sum(num1,num2)" />
<input type="text" ng-model="addition" />


</div>
</body>
</html>



///.. the textbox in which u want the output just use ng-model there .. as u can see above:..

Benutzer-Avatar
Muhammad Fiaz

‘Summe von zwei Zahlen in AngularJs

<input type="number" ng-model="FirstNumber">
<input type="number" ng-model="SecondNumber">
{{FirstNumber+SecondNumber}}

1227290cookie-checkWie summiere ich zwei Felder in AngularJS und zeige das Ergebnis in einem Label?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy