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.Field1
and 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 parseFloat
method 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:
基于输入标签类型,我们可以通过以下两种方式进行: