Ich habe eine Situation auf meiner Seite.

Ich habe zwei Eingaben und eine Beschriftung auf meiner Seite. Diese Beschriftung muss die Summe dieser beiden Eingabewerte anzeigen.

Also habe ich folgende Lösung ausprobiert:

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 Laden der Seite wird beim ersten Laden die Summe angezeigt, aber wenn ich einen Wert in eine Eingabe eingebe, Diese Lösung gibt mir ein KONKATENATIONS-Ergebnis von Property.Field1 und Property.Field2 anstelle der Summe .

Also habe ich diese ausprobiert:

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>

Wieder nicht erfolgreich.

Wie kann ich das Summenergebnis von zwei Eingaben auf dem Etikett erzielen?

44
Aitiow 6 Okt. 2012 im 04:11

11 Antworten

Beste Antwort

Haben Sie tatsächlich eine parseFloat Methode in Ihrem Controller erstellt? Da Sie JS nicht einfach in Angular-Ausdrücken verwenden können, lesen Sie Angular Expressions vs. JS Expressions.

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

Edit: es sollte auch möglich sein, einfach einen referenz auf die ursprüngliche funktion zu setzen:

$scope.parseFloat = parseFloat;

Ich würde auch erwarten, dass es mit Filtern funktioniert, aber leider nicht (könnte ein Fehler sein, oder ich habe falsch verstanden, wie Filter funktionieren):

<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>
56
ndm 6 Okt. 2012 im 21:01
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:..
1
sunny 6 Jän. 2016 im 10:02

Der einfachste und beste Weg, zwei Zahlen zu summieren, ist die Verwendung von type="number" von HTML5. In diesem Fall sind die Werte der Eingaben standardmäßig Ganzzahlen.

Geige aktualisiert

10
user1429980 18 Juli 2014 im 00:06

Für Angular (Version 2 und höher) Versuchen Sie, etwas wie das Folgende zu tun

    <p>First Number <input type="number"  [(ngModel)]="fnum"></p>
    <p>Second Number <input type="number" [(ngModel)]="snum"></p>
    <p>Total = {{fnum+snum}}</p>
0
MKant 26 Juli 2017 im 13:24
    <!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>
2
SmartManoj 4 Okt. 2018 im 16:12
Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ Property.Field1 + Property.Field2  }}</label>

Sie können die doppelte Negation anstelle von direktem + verwenden. Dies funktioniert, wenn Sie type = "number" haben. Verwenden Sie für type = "text" die Methode der doppelten Negation. so was

 sum:{{ Property.Field1 -- Property.Field2  }}
0
Irrfan23 19 Juli 2018 im 05:39

based on input tag type we can do it in these two ways

Basierend auf dem Typ des Eingabe-Tags können wir dies auf zwei Arten tun:

0
Devashish Priyadarshi 26 Jän. 2018 im 15:23

'Summe von zwei Zahlen in AngularJs

<input type="number" ng-model="FirstNumber">
<input type="number" ng-model="SecondNumber">
{{FirstNumber+SecondNumber}}
1
Muhammad Fiaz 20 Apr. 2019 im 04:32

Das Columbus-Ei ist: doppelte Negation .

Der Anfangswert ist 0 (anstelle von Null) und das Ergebnis ist eine Summe (anstelle einer Verkettung aufgrund 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>
53
Andrea Ligios 26 März 2015 im 14:03
Sum in Angularjs
<div ng-app>
        <input type="text" ng-model="first" />
        <input type="text" ng-model="second" />
        Sum: {{first*1 + second*1}}
</div>
7
Ankit 16 Jän. 2015 im 09:51
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

 <h2>Demo-Sum of two input value </h2>
   <div ng-app="my_firstapp" ng-controller="myfirst_cntrl">
   Number 1 : <input type="text" ng-model="Property.num1" data-ng-init="Property.num1='1'"><br>
   Number 2 : <input type="text" ng-model="Property.num2" data-ng-init="Property.num2='2'"><br>
   Sum of : {{ parseFloat(Property.num1) + parseFloat(Property.num2) }}

 </div>

<script type="text/javascript">
 var app1 = angular.module('my_firstapp', []);
 app1.controller('myfirst_cntrl', function controller($scope) {
  $scope.parseFloat = function(value) {
    return parseFloat(value);
  }
});
</script>
</body>

</html> 
 <p>Output</p>
<p>Sum of : 3</p>
0
Reena Mori 30 Mai 2017 im 12:53