CODEWITHSUNDEEP
angularjsionic-framework
Yokesh Varadhan
Yokesh Varadhan

Reputation: 1636

simple calculator gets number from textboxs and display it in another text box

a calculator that add value from two textbox using Add button display result in another textbox in html

<ion-content>
        <div class="tbox">
            <label>
                <input type="number" placeholder="Number 1" ng-model="N1">
            </label>
            <label>
                <input type="number" placeholder="Number 2" ng-model="N2">
            </label>
            <label>
                <input type="number" placeholder="Result" ng-model="R">
            </label>
        </div>

        <label>
            <button class="button button-block button-positive"> Add </button>
        </label>
    </ion-content>

user input from textbox should be added up when add button is been pressed i dont know how to develop it in angularjs

Upvotes: 0

Views: 2090

Answers (2)

Yogeshree Koyani
Yogeshree Koyani

Reputation: 1643

You are not assigning a+b to result variable.Assign to result variable and you will get your expected result.Example on plnkr

Add button in your template and bind click event. On click event just assign your a+b in result variable.

I think you are looking something like this.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example </title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
    <p> 
      First Number:<input type="number" ng-model="a" />
    </p>
    <p>
      Second Number: <input type="number" ng-model="b" />
    </p>
    <p>
      Result : <input type="number" ng-model="result" />
    </p>
    <input type="button" value="Add" ng-click="add()">
    <p>
       Sum: {{ a + b }}
    </p>
</body>
<script>
  var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
    $scope.add = function(){
         $scope.result = $scope.a + $scope.b;
    };
  });
</script>

</html>

Upvotes: 1

Anandhan Suruli
Anandhan Suruli

Reputation: 365

Just try this 

<input type="number" value="{{a+b}}" />
<p >
   Sum: <span ng-bind="a+b"></span>
</p>

Upvotes: 0

Related Questions