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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 11:11:14  来源:igfitidea点击:

How to sum two fields in AngularJS and show the result in an label?

javascripthtmlangularjssum

提问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". 如果这样做,默认情况下输入的值是整数。

Updated fiddle

更新的小提琴

回答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

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

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

基于输入标签类型,我们可以通过以下两种方式进行: