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

Habe ich eine situation auf meiner Seite.

Habe ich zwei Eingänge und ein Etikett in meiner Seite. Diese Aufkleber zeigen die Summe der beiden Eingänge Wert.

So, ich habe versucht, aus Lösung:

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

In der ersten Zeit, wenn die Seite komplett geladen ist, zeigt das label die Summe, aber wenn ich geben Sie einen Wert in jedem Eingang,
diese soution gibt mir eine VERKETTUNG Ergebnis Property.Field1 und Property.Field2, anstelle der Summe.

so, ich habe versucht diese:

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>

nicht erfolgreichen wieder.

Wie könnte ich erreichen, Ergebnis der Summe der beiden Eingänge angezeigt, die in das label?

InformationsquelleAutor der Frage Aitiow | 2012-10-06

52

Haben Sie tatsächlich erstellt eine parseFloat Methode im controller? Da kann man nicht einfach verwenden, Angular JS in Ausdrücken finden Sie unter Angular-Ausdrü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:
```
$scope.parseFloat = parseFloat;
```
Ich würde auch erwarten, dass es funktioniert mit Filter, aber leider ist es nicht (vielleicht ein bug, oder habe ich missverstanden, wie die Filter funktionieren):
```
<label>{{ (Property.Field1|number) + (Property.Field2|number) }}</label>
```
Workaround wäre die Nutzung von Multiplikation für den Guss:
```
<label>{{ (Property.Field1 * 1) + (Property.Field2 * 1) }}</label>
```
InformationsquelleAutor der Antwort ndm
8

Der einfachste und beste Weg, um die Summe von zwei zahlen ist der Einsatz von HTML5 ist type="number". Wenn Sie dies tun, werden die Eingänge' sind Werte, die standardmäßig Ganzzahlen.

Aktualisiert fiddle

InformationsquelleAutor der Antwort user1429980

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

InformationsquelleAutor der Antwort Ankit

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

InformationsquelleAutor der Antwort sunny

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

InformationsquelleAutor der Antwort jobseeker_Angular

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

InformationsquelleAutor der Antwort Reena Mori

Eckige (version 2 und höher) Versuchen, etwas zu tun, wie unten

    <p>First Number <input type="number"  [(ngModel)]="fnum"></p>
    <p>Second Number <input type="number" [(ngModel)]="snum"></p>
    <p>Total = {{fnum+snum}}</p>

InformationsquelleAutor der Antwort MKant

0

basierend auf dem input-tag geben wir es tun können, in diesen zwei Möglichkeiten:

InformationsquelleAutor der Antwort Devashish Priyadarshi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.