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

后端未结

关注

 11  1648

别那么骄傲

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 sol

相关标签:

11条回答

囚心锁ツ

2020-12-09 01:25

'Sum of Two Number in AngularJs

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

0 讨论(0)

灰色年华

2020-12-09 01:32

The Columbus's egg is: 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).

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

0 讨论(0)

遥遥无期

2020-12-09 01:32

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

0 讨论(0)

醉梦人生

2020-12-09 01:36
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.
```
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
执笔经年

2020-12-09 01:41
```
Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ Property.Field1 + Property.Field2  }}</label>
```
you can use double negation instead of using direct +. This will work if you have type= "number". for type="text" use double negation method. like this
```
 sum:{{ Property.Field1 -- Property.Field2  }}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

忘掉有多难

2020-12-09 01:42

For Angular (version 2 and above) Try doing something like below

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

0 讨论(0)

1 2 下一页