CODEWITHSUNDEEP
angularjs
Prince
Prince

Reputation: 11

I want to make a simple CalC in Angular Js

Here is My code...

<html ng-app='CalC'>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
        <script >
            var app = angular.module('CalC',[]);
            app.controller('stoInt',function($scope){
                $scope.parseInt(txt1,10);
                $scope.parseInt(txt2,10);
            });
        </script>
    </head>
    <body  ng-controller="stoInt">
        <div class="panel panel-default" style="height: 200px;width : 200px;margin: 100px;">
            <div class="panel-body">
                <input type="text" class="form-control" placeholder="Enter 1st Number" ng-model="txt1" pattern="[0-9]*">
                <br>
                <input type="text" class="form-control" placeholder="Enter 2nd Number" ng-model="txt2" pattern="[0-9]">
            <br><br>
                 <p> Result :: {{txt1+txt2}} </p>
            </div>
        </div>

    </body>
</html>

o/p Result :: {{txt1+txt2}}.

Upvotes: 1

Views: 46

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

Solution 1

There are few mistakes in your code, you need to make parseInt for the scope variable 

 parseInt($scope.txt1,10);
 parseInt($scope.txt2,10);

you can define a function to calculate the sum and return it,

  $scope.add = function(){
      return parseInt($scope.txt1) + parseInt($scope.txt2);
  }

DEMO

    <html ng-app='CalC'>
    	<head>
    		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
    		<script >
    			var app = angular.module('CalC',[]);
    			app.controller('stoInt',function($scope){
    			   $scope.add = function(){
               return parseInt($scope.txt1) + parseInt($scope.txt2);
             }
    			});
    		</script>
    	</head>
    	<body  ng-controller="stoInt">
    		<div class="panel panel-default" style="height: 200px;width : 200px;margin: 100px;">
    			<div class="panel-body">
    				<input type="text" class="form-control" placeholder="Enter 1st Number" ng-model="txt1" pattern="[0-9]*">
    				<br>
    				<input type="text" class="form-control" placeholder="Enter 2nd Number" ng-model="txt2" pattern="[0-9]">
    			<br><br>
    				 <p> Result :: {{add()}} </p>
    			</div>
    		</div>
    		
    	</body>
    </html>

Solution 2

Make the input type as number,

 <div class="panel-body">
 <input type="number" class="form-control" placeholder="Enter 1st Number" ng-model="txt1" pattern="[0-9]*">
 <br>
 <input type="number" class="form-control" placeholder="Enter 2nd Number" ng-model="txt2" pattern="[0-9]">
 <br><br>

DEMO

<html ng-app='CalC'>
    	<head>
    		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
    		<script >
    			var app = angular.module('CalC',[]);
    			app.controller('stoInt',function($scope){    			   
    			});
    		</script>
    	</head>
    	<body  ng-controller="stoInt">
    		<div class="panel panel-default" style="height: 200px;width : 200px;margin: 100px;">
    			<div class="panel-body">
    				<input type="number" class="form-control" placeholder="Enter 1st Number" ng-model="txt1" pattern="[0-9]*">
    				<br>
    				<input type="number" class="form-control" placeholder="Enter 2nd Number" ng-model="txt2" pattern="[0-9]">
    			<br><br>
    				 <p> Result :: {{txt1+txt2}} </p>
    			</div>
    		</div>
    		
    	</body>
    </html>

Upvotes: 1

Related Questions