如何在AngularJS中总结两个字段并在标签中显示结果？

我在我的页面上有一种情况。如何在AngularJS中总结两个字段并在标签中显示结果？

我在页面中有两个输入和一个标签。这些标签必须显示这两个输入值的总和。

所以，我想下面的解决方案：

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

在第一时间，当页面完全以加载，标签显示的总和，但是当我在任何输入键入一些值， 这些soution给我结果为Property.Field1和Property.Field2，而不是总和。

，所以我尝试了这些：

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>

没有再次SUCESSFUL。

我怎么能达到标签中显示的两个输入的总和结果？

来源

2012-10-06 Aitiow

您是否真的在控制器中创建了parseFloat方法？因为不能在角度表达式中简单使用JS，请参阅Angular Expressions vs. JS Expressions。

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

编辑：它也应该可以简单地设置为原始函数的引用：

$scope.parseFloat = parseFloat;

我也希望它有过滤器的工作，但遗憾的是它并没有（可能是一个bug，或我误解了过滤器的工作原理）：

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

一种解决方法是使用乘法铸造：

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

来源

2012-10-06 01:28:51 ndm

感谢，其definitly解决我的问题 – Aitiow

不客气......我已经添加了另一种方式，我不知道为什么我hadn之前没有考虑过，设置参考也应该这样做。 – ndm

只是fyi标准的做法是'value | 0'，asm.js使用它，例如。 – vittore

的哥伦布的鸡蛋是：双重否定。

初始值将是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>

来源

2013-11-22 14:57:59

你可以建议我分裂和multipye以及。 –

对于**分区**和**乘法**，您可以简单地使用'/'和'*'; ** sum **的问题是'+'被解释为一个连接运算符，而不是一个求和运算符...''''劈头:)对于乘法，可以将0加到两个运算符为了防止起始空值，对于你必须考虑的其他分区（也就是当字段被0填充时除以0的情况）：http://jsfiddle.net/AndreaLigios/73gQR/17/ –

很酷的解决方案;） – Adrian

总结两个数字的最简单有效的方法是使用HTML5的type="number"。如果你这样做，输入的值默认是整数。

Updated fiddle

来源

2014-07-18 00:06:51 user1429980

+ 1，没错，至少在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>

来源

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

来源

2016-01-06 10:02:09 sunny

保持每个文件在它自己的代码标签，以提高可读性 – AbdealiJK

代码块独自不提供一个很好的答案。请添加解释（为什么它解决了问题，错误在哪里等...） –

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

来源

2017-05-30 12:53:15

你不应该只是发布一些代码，而是解释你的解决方案。 – 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>

来源

2017-06-26 02:34:10

对于角度（2.0版以上）试着做类似下面

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

来源

2017-07-26 13:24:34 MKant

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

基于输入标签类型0

，我们可以做到这一点通过以下两种方法：

来源

2018-01-26 15:23:26

如何在AngularJS中总结两个字段并在标签中显示结果？

回答

相关问题