javascript - create - ng-init
¿Cómo se suman dos campos en AngularJS y se muestra el resultado en una etiqueta? (10)
¿Has creado realmente un método parseFloat en tu controlador? Como no puede usar simplemente JS en expresiones angulares, consulte Expresiones angulares frente a Expresiones de JS .
function controller($scope)
{
$scope.parseFloat = function(value)
{
return parseFloat(value);
}
}
editar: también debería ser posible simplemente establecer una referencia a la función original:
$scope.parseFloat = parseFloat;
También espero que funcione con filtros, pero desafortunadamente no (podría ser un error o no entendí cómo funcionan los filtros):
<label>{{ (Property.Field1|number) + (Property.Field2|number) }}</label>
Una solución alternativa sería usar la multiplicación para el casting:
<label>{{ (Property.Field1 * 1) + (Property.Field2 * 1) }}</label>
Tengo una situación en mi página.
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 probé la siguiente 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 la primera vez, cuando la página está totalmente cargada, la etiqueta muestra la suma, pero cuando escribo algún valor en cualquier entrada, estas opciones me dan un resultado de CONCATENACIÓN de Property.Field1 y Property.Field2 , en lugar de la suma .
así que probé estos:
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 éxito otra vez.
¿Cómo podría lograr el resultado de suma de dos entradas que se muestran en la etiqueta?
El huevo de Colón 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>
La forma más fácil y mejor de sumar dos números es usar el type="number" HTML5. Si hace esto, los valores de las entradas son, por defecto, enteros.
Para Angular (versión 2 y superior) Intente hacer algo como 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>
basado en el tipo de etiqueta de entrada podemos hacerlo de estas dos maneras:
<!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>
<!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>
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:..
Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ Property.Field1 + Property.Field2 }}</label>
puede usar doble negación en lugar de usar directo +. Esto funcionará si tienes type = "number". para type = "text" usa el método de doble negación. Me gusta esto
sum:{{ Property.Field1 -- Property.Field2 }}
Sum in Angularjs
<div ng-app>
<input type="text" ng-model="first" />
<input type="text" ng-model="second" />
Sum: {{first*1 + second*1}}
</div>