Javascript 如何在 AngularJS 中对两个字段求和并将结果显示在标签中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12755558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to sum two fields in AngularJS and show the result in an label?
提问by Aitiow
I have an situation on my page.
我的页面上有一个情况。
I have two inputs and an label in my page. These label have to show the sum of these two inputs value.
我的页面中有两个输入和一个标签。这些标签必须显示这两个输入值的总和。
So I tried below solution:
所以我尝试了以下解决方案：
Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ Property.Field1 + Property.Field2 }}</label>
At the first time, when the page is totaly loaded, the label shows the sum but when I type some value in any input,
these soution gives me a CONCATENATION result of Property.Field1and Property.Field2, instead of the sum.
第一次，当页面完全加载时，标签显示总和，但是当我在任何输入中输入一些值时，
这些 soution 给我一个Property.Field1和的 CONCATENATION 结果 Property.Field2，而不是 sum。
so I tried these:
所以我尝试了这些：
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>
no sucessful again.
再次没有成功。
How could I achieve the sum result of two inputs shown in the label?
我怎样才能获得标签中显示的两个输入的总和结果？
回答by ndm
Have you actually created a parseFloatmethod in your controller? Because you can't simply use JS in Angular expressions, see Angular Expressions vs. JS Expressions.
你真的parseFloat在你的控制器中创建了一个方法吗？因为你不能简单地在 Angular 表达式中使用 JS，请参阅Angular Expressions vs. JS Expressions。
function controller($scope)
{
$scope.parseFloat = function(value)
{
return parseFloat(value);
}
}
edit: it should also be possible to simply set a reference to the original function:
编辑：也应该可以简单地设置对原始函数的引用：
$scope.parseFloat = parseFloat;
I would also expect it to work with filters, but unfortunately it doesn't (might be a bug, or i've misunderstood how filters work):
我也希望它可以与过滤器一起使用，但不幸的是它不能（可能是一个错误，或者我误解了过滤器的工作原理）：
<label>{{ (Property.Field1|number) + (Property.Field2|number) }}</label>
A workaround would be to use multiplication for casting:
一种解决方法是使用乘法进行转换：
<label>{{ (Property.Field1 * 1) + (Property.Field2 * 1) }}</label>
回答by Andrea Ligios
The Columbus's eggis: double negation.
在哥伦布的鸡蛋是：双重否定。
The initial value will be 0 (instead of null), and the result will be a sum (instead of a concatenation, because of the implicit numeric cast).
初始值将是 0（而不是 null），结果将是一个总和（而不是串联，因为隐式数字转换）。
<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>回答by user1429980
The easiest and best way to sum two numbers is using HTML5's type="number". If you do this, the inputs' values are, by default, integers.
对两个数字求和的最简单和最好的方法是使用 HTML5 的type="number". 如果这样做，默认情况下输入的值是整数。
回答by Ankit
Sum in Angularjs
<div ng-app>
<input type="text" ng-model="first" />
<input type="text" ng-model="second" />
Sum: {{first*1 + second*1}}
</div>
回答by jobseeker_Angular
<!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>回答by sunny
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:..
回答by Muhammad Fiaz
'Sum of Two Number in AngularJs
'AngularJs 中两个数的和
<input type="number" ng-model="FirstNumber">
<input type="number" ng-model="SecondNumber">
{{FirstNumber+SecondNumber}}
回答by Reena Mori
<!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>
回答by MKant
For Angular (version 2 and above) Try doing something like below
对于 Angular（版本 2 及更高版本）尝试执行以下操作
<p>First Number <input type="number" [(ngModel)]="fnum"></p>
<p>Second Number <input type="number" [(ngModel)]="snum"></p>
<p>Total = {{fnum+snum}}</p>
回答by Devashish Priyadarshi
based on input tag type we can do it in these two ways:
基于输入标签类型，我们可以通过以下两种方式进行：
