Addition of two numbers in angularJS onclick

Question

I am trying to add two numbers and want to display its result only when I click a button. Here is my code below:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

<h2>Calculator</h2>

a: <input type="number" ng-model="a">
b: <input type="number" ng-model="b">
<button ng-click="addFunc()">Sum</button>
Sum : {{sum}}
<!-- <p><b>Summation:</b> {{sum = a + b}}</p> -->
<br/><br/><br/>
c: <input type="number" ng-model="c">
d: <input type="number" ng-model="d">
<p><b>Subtraction:</b> {{c - d}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sum = 0;
    $scope.addFunc = function() {
        $scope.sum=a+b;
    }
});
</script>
</body>
</html>

$scope.sum = $scope.a + $scope.b;

Rayon
– Rayon

2016-08-18 10:27:33 +00:00
Commented Aug 18, 2016 at 10:27 — Rayon
– Rayon, Commented Aug 18, 2016 at 10:27
stackoverflow.com/a/39015824/5137527

byteC0de
– byteC0de

2016-08-18 10:33:30 +00:00
Commented Aug 18, 2016 at 10:33 — byteC0de
– byteC0de, Commented Aug 18, 2016 at 10:33
yeah...it worked..! thanks alot.

Pradeep
– Pradeep

2016-08-18 12:03:26 +00:00
Commented Aug 18, 2016 at 12:03 — Pradeep
– Pradeep, Commented Aug 18, 2016 at 12:03

sabithpocker · Accepted Answer · 2016-08-19 06:42:50Z

1

If you try to access a and b from this function, it will look into the lexical scope of this function. Since you don't have the variables declared over there it won't work. You neither have the variables declared anywhere up in the scope chain as its inside the custom $scope(just a javascript Object) maintained by angular. Angular uses its own $scope which is injected into the controller, to access that scope you have to access via $scope. itself. The idea is to share this between template(view) and function(controller)

$scope.addFunc = function() {
    $scope.sum=a+b;
}

In your template a + b works because angular uses $scope internally for all variables used in your template, so you don't have to add $scope over there.

<p><b>Summation:</b> {{sum = a + b}}</p>

In your case you can use $scope like:

$scope.addFunc = function() {
    $scope.sum= $scope.a + $scope.b;
}

or use this as the function is called with $scope and will have implicit reference.

$scope.addFunc = function() {
    this.sum= this.a + this.b; //when calling $scope.addFunc() this will be $scope
}

or use with statement (although not recommended due to some edge cases)

$scope.addFunc = function() {
    with($scope) sum = a + b;
}

edited Aug 19, 2016 at 6:42

answered Aug 18, 2016 at 10:55

sabithpocker

15.6k1 gold badge44 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pradeep Over a year ago

Your knowledge is amazing...thanks for this accurate explanation

Pushkar Kathuria · Accepted Answer · 2016-08-18 10:50:20Z

1

The moment you wrote a & b as ng-model, They are automatically connected to $scope object.

So if you want to add them, you simply have to write

$scope.a + $scope.b

answered Aug 18, 2016 at 10:50

Pushkar Kathuria

3312 silver badges17 bronze badges

Comments

Jekin Kalariya · Accepted Answer · 2016-08-18 10:28:53Z

0

Try this code

Calculator

a: <input type="number" ng-model="a">
b: <input type="number" ng-model="b">
<button ng-click="addFunc()">Sum</button>
Sum : {{sum}}
<!-- <p><b>Summation:</b> {{sum = a + b}}</p> -->
<br/><br/><br/>
c: <input type="number" ng-model="c">
d: <input type="number" ng-model="d">
<p><b>Subtraction:</b> {{c - d}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sum = 0;
    $scope.addFunc = function() {
        $scope.sum=$scope.a+$scope.b;
    }
});
</script>
</body>
</html>

answered Aug 18, 2016 at 10:28

Jekin Kalariya

3,5072 gold badges22 silver badges32 bronze badges

1 Comment

Pradeep Over a year ago

I accept/approve your answer. If there is any official way to accept/approve answer, please let me know as I am new to it.

Learning · Accepted Answer · 2016-08-18 10:30:33Z

0

a and b are in $scope:

$scope.addFunc = function() {
    $scope.sum = $scope.a + $scope.b;
}

answered Aug 18, 2016 at 10:30

Learning

3051 silver badge13 bronze badges

Comments

Syam Pillai · Accepted Answer · 2016-08-18 10:35:06Z

0

Pass the values to controller

<button ng-click="addFunc(a, b)">Sum</button>

controler

$scope.addFunc = function(a, b) {
    $scope.sum=a+b;
}

OR

HTML:

<button ng-click="addFunc()">Sum</button>

Controller:

$scope.addFunc = function() {
    $scope.sum=$scope.a+$scope.b;
}

edited Aug 18, 2016 at 10:35

Syam Pillai

5,2202 gold badges31 silver badges43 bronze badges

answered Aug 18, 2016 at 10:27

byteC0de

5,3436 gold badges36 silver badges68 bronze badges

2 Comments

byteC0de Over a year ago

@Pradeep can you pls approve my answer

Pradeep Over a year ago

I accept/approve your answer. If there is any official way to accept/approve answer, please let me know as I am new to it.

Kumar · Accepted Answer · 2016-08-18 10:36:39Z

0

Here is solution

jsfiddle

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.sum = 0;
    $scope.addFunc = function() {
        $scope.sum=$scope.a+$scope.b;
    }

answered Aug 18, 2016 at 10:36

Kumar

2801 gold badge4 silver badges18 bronze badges

Comments

Rob · Accepted Answer · 2017-09-07 01:54:18Z

Try this code: We need to type cast our variable i.e., ng-model value to number else it will return string.

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body ng-app="MyApp" ng-controller="myctrl">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"> </script> 
    
    <script>
        var app=angular.module("MyApp",[]);
        app.controller("myctrl",function($scope){
            $scope.value=0;
            $scope.add=function(){
            $scope.value=Number($scope.fnum)+   Number($scope.snum);
            };
            
        });
    </script>

    firstname:<input type="text" ng-model="fnum" placeholder="Enter value" /><br>
    lastname:<input type="text" ng-model="snum" placeholder="Enter value" /><br>
    <input type="button" value="Click" ng-click="add() " /><br>
    <div ng-repeat="a in res()">{{a}}</div>
    <div>{{value}}</div>
</body>
</html>

Collectives™ on Stack Overflow

Addition of two numbers in angularJS onclick

7 Answers 7

1 Comment

Comments

Calculator

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Calculator

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related