如何在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中總結兩個字段並在標籤中顯示結果？

回答

相關問題