如何对 AngularJS 中的两个字段求和并在标签中显示结果？

Posted 2023-02-16

技术标签:

【中文标题】如何对 AngularJS 中的两个字段求和并在标签中显示结果？【英文标题】：How to sum two fields in AngularJS and show the result in an label? 【发布时间】：2012-09-27 03:49:14 【问题描述】：

我的页面上有一个情况。

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

所以我尝试了以下解决方案：

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

第一次，当页面完全加载时，标签显示总和但是当我在任何输入中键入一些值时， 这些解决方案给了我Property.Field1 和Property.Field2 的CONCATENATION 结果，而不是总和。

所以我尝试了这些：

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>

再次没有成功。

如何实现标签中显示的两个输入的总和结果？

【问题讨论】：

【参考方案1】：

您可以使用一元加号运算符将变量转换为数字。

 (+count1)+(+count2)

【讨论】：

【参考方案2】：

'AngularJs 中两个数之和

<input type="number" ng-model="FirstNumber">
<input type="number" ng-model="SecondNumber">
FirstNumber+SecondNumber

【讨论】：

【参考方案3】：

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

【讨论】：

【参考方案4】：

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

您可以使用双重否定来代替直接 +。如果你有 type="number" 这将起作用。对于 type="text" 使用双重否定方法。像这样

 sum: Property.Field1 -- Property.Field2

【讨论】：

【参考方案5】：

根据输入标签类型，我们可以通过以下两种方式进行：

【讨论】：

【参考方案6】：

对于 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>

【讨论】：

【参考方案7】：

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

【讨论】：

你不应该只发布一些代码，而应该解释你的解决方案。【参考方案8】：

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

【讨论】：

单独的代码块并不能提供好的答案。请添加解释（为什么它解决了问题，错误在哪里等等......）【参考方案9】：

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

初始值为 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>

【讨论】：

你能不能建议我进行除法和乘法。对于除法和乘法，你可以简单地使用/和*； sum 的问题在于 + 被解释为连接运算符，而不是求和运算符...-- 破解了 :) 对于乘法，您可以将 0 与两个运算符来防止开始的空值，对于除法你必须考虑别的东西（也适用于当字段填充为 0 时除以 0 的情况）：jsfiddle.net/AndreaLigios/73gQR/17 嗨，这可行，但有一个问题....我必须在它们上使用 ng-model 来保存它们的值，但是当我使用 ng-model 时，它无法正常工作。跨度> 定义“不能正常工作”。你把 ng-app 放在容器上了吗？顺便说一句，这有效并回答了 this 问题，如果您有其他问题，您应该提出一个新问题@Stun_Gravy【参考方案10】：

Sum in Angularjs
<div ng-app>
        <input type="text" ng-model="first" />
        <input type="text" ng-model="second" />
        Sum: first*1 + second*1
</div>

【讨论】：

【参考方案11】：

对两个数字求和的最简单和最好的方法是使用 HTML5 的type="number"。如果这样做，输入的值默认为整数。

Updated fiddle

【讨论】：

【参考方案12】：

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

function controller($scope)

    $scope.parseFloat = function(value)
    
        return parseFloat(value);

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

$scope.parseFloat = parseFloat;

我也希望它可以与过滤器一起使用，但不幸的是它不能（可能是一个错误，或者我误解了过滤器的工作原理）：

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

一种解决方法是使用乘法进行转换：

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

【讨论】：

不客气...我添加了另一种方式，我不知道为什么我以前没有考虑过，设置参考也应该这样做。仅供参考，标准的做法是 value | 0 ，例如 asm.js 使用它。

以上是关于如何对 AngularJS 中的两个字段求和并在标签中显示结果？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 AngularJs 对对象数组中的属性值求和

如何使用 angularjs 比较输入字段中的两个数字？

如何对数据表中特定数据列的值求和

Mongodb - 猫鼬，通过对两个字段求和进行排序

如何在 MySQL 中对两个结果集中的列求和

Kibana两个字段求和