web-dev-qa-db-fra.com

Comment additionner deux champs dans AngularJS et afficher le résultat dans une étiquette?

J'ai une situation sur ma page.

J'ai deux entrées et une étiquette dans ma page. Ces étiquettes doivent montrer la somme de ces deux entrées.

J'ai donc essayé la solution ci-dessous:

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

Lors du premier chargement, lorsque la page est totalement chargée, le libellé indique la somme, mais lorsque je tape une valeur dans une entrée quelconque, ces paramètres me donnent un résultat CONCATENATION de Property.Field1 et Property.Field2, au lieu de la somme.

alors j'ai essayé ces:

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>

pas réussi encore.

Comment puis-je obtenir le résultat de la somme des deux entrées indiquées sur l'étiquette?

javascripthtmlangularjssum
44
Aitiow

Avez-vous créé une méthode parseFloat dans votre contrôleur? Comme vous ne pouvez pas simplement utiliser JS dans les expressions Angular), voir expressions angulaires par rapport aux expressions JS) .

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

edit: il devrait également être possible de simplement définir une référence à la fonction d'origine:

$scope.parseFloat = parseFloat;

Je m'attendrais également à ce que cela fonctionne avec des filtres, mais malheureusement, ce n'est pas le cas (cela pourrait être un bug ou j'ai mal compris comment les filtres fonctionnent):

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

Une solution de contournement consisterait à utiliser la multiplication pour la conversion:

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

L'oeuf de Columbus est: double négation .

La valeur initiale sera 0 (au lieu de null) et le résultat sera une somme (au lieu d'une concaténation, en raison de la conversion numérique implicite).

<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

Le moyen le plus simple et le meilleur d’additionner deux nombres est d’utiliser le type="number". Si vous faites cela, les valeurs des entrées sont, par défaut, des entiers.

violon mis à jour

9
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>
7
Ankit
    <!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
jobseeker_Angular
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

'Somme de deux nombres en AngularJs

<input type="number" ng-model="FirstNumber">
<input type="number" ng-model="SecondNumber">
{{FirstNumber+SecondNumber}}
1
Muhammad Fiaz
Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ Property.Field1 + Property.Field2  }}</label>

vous pouvez utiliser la double négation au lieu d'utiliser direct +. Cela fonctionnera si vous avez le type = "numéro". pour type = "text", utilisez la méthode de double négation. comme ça

 sum:{{ Property.Field1 -- Property.Field2  }}
0
Irrfan23
<!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

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

sur la base du type de balise d’entrée, nous pouvons le faire de deux manières:

0
Devashish Priyadarshi

Pour Angular (version 2 et supérieure)) Essayez de faire quelque chose comme ci-dessous.

    <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