¿Cómo se suman dos campos en AngularJS y se muestra el resultado en una etiqueta?

Tengo una situación en mi página.¿Cómo se suman dos campos en AngularJS y se muestra el resultado en una etiqueta?

Tengo dos entradas y una etiqueta en mi página. Estas etiquetas tienen que mostrar la suma de estos dos valores de entrada.

así que traté de abajo solución:

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

En el primer tiempo, cuando la página se ha cargado totalmente, la etiqueta muestra la suma, pero cuando escribo algún valor en cualquier entrada, estos soution me da un resultado de CONCATENATION de Property.Field1 y Property.Field2, en lugar de la suma.

así que traté siguientes:

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>

sin más exitoso.

¿Cómo puedo lograr el resultado de suma de dos entradas que se muestran en la etiqueta?

Fuente

2012-10-06 Aitiow

¿Has creado realmente un método parseFloat en tu controlador? Como no puede usar simplemente JS en expresiones angulares, consulte Angular Expressions vs. JS Expressions.

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

edit: también debería ser posible establecer simplemente una referencia a la función original:

$scope.parseFloat = parseFloat;

También esperaría que funcione con filtros, pero por desgracia no lo hace (podría ser un insecto, o he entendido bien cómo funcionan los filtros):

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

una solución alternativa sería usar la multiplicación para la fundición:

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

Fuente

2012-10-06 01:28:51 ndm

gracias, es definitivamente resolver mi problema – Aitiow

De nada ... he añadido otra forma, no sé por qué no lo había hecho No lo pensé antes, establecer una referencia debería hacerlo también. – ndm

Simplemente, la forma estándar de hacerlo es 'value | 0', asm.js usándolo, por ejemplo. – vittore

huevo de Colón El es: doble negación.

El valor inicial será 0 (en lugar de nulo), y el resultado será una suma (en lugar de una concatenación, debido a la conversión numérica implícita).

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

Fuente

2013-11-22 14:57:59

me pueden sugerir para dividir y multiplicar también. –

Para ** división ** y ** multiplicación **, simplemente puede usar '/' y '*'; el problema con ** sum ** era que el '+' se interpretaba como un operador de concatenación, no como un operador de suma ... '-' piratea eso :) Para la multiplicación, puede sumar 0 a los dos operadores para evitar que un valor nulo de partida, por la división que tiene que pensar en otra cosa (también para el caso de la división por 0 cuando el campo está lleno de 0): http://jsfiddle.net/AndreaLigios/73gQR/17/ –

se enfría la solución;) – Adrian

La manera más fácil y mejor para sumar dos números es el uso de HTML5 de type="number". Si hace esto, los valores de las entradas son, por defecto, enteros.

Updated fiddle

Fuente

2014-07-18 00:06:51 user1429980

+ 1, eso es correcto, al menos en los navegadores html5 –

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

Fuente

2015-01-16 09:51:52 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:..

Fuente

2016-01-06 10:02:09 sunny

Mantenga cada archivo en su propia etiqueta de código para una mejor legibilidad – AbdealiJK

Un código bloquear solo no proporciona una buena respuesta. Agregue las explicaciones (por qué solucionó el problema, dónde fue el error, etc.) –

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

Fuente

2017-05-30 12:53:15

No solo debe publicar un código, sino más bien explicar su solución. – hering

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

Fuente

2017-06-26 02:34:10

Por angular (versión 2 o superior) Trate de hacer algo parecido a continuación

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

Fuente

2017-07-26 13:24:34 MKant

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

basado en el tipo de etiqueta de entrada podemos hacerlo de estas dos maneras:

Fuente

2018-01-26 15:23:26

¿Cómo se suman dos campos en AngularJS y se muestra el resultado en una etiqueta?

Respuesta

Cuestiones relacionadas