How to sum two fields in AngularJS and show the result in an label?
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
-
Sum in Angularjs <div ng-app> <input type="text" ng-model="first" /> <input type="text" ng-model="second" /> Sum: {{first*1 + second*1}} </div>讨论(0) -
<!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>讨论(0) -
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.Updated fiddle
讨论(0) -
<!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>讨论(0) -
based on input tag type we can do it in these two ways:
讨论(0)
加载中...
- 热议问题