Here we create small application which perform 'addition', 'subtraction', 'multiplication' & 'division' with the help of Angular JS.
Application Code:
ng-app in div tag: it means were setting the AngularJS name.
<!DOCTYPE html >
<html>
<head>
<title>Angulor Calculator</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
</head>
<body>
<div ng-app>
<fieldset>
<h2>Calculator</h2>
<dl>
<dt>First No :</dt>
<dd><input type="text" ng-model="first" /></dd>
<dt>Second No :</dt>
<dd><input type="text" ng-model="second" /></dd>
<div class="clr"></div>
</dl>
<div class="operations">
<button ng-click="total = first -- second">Add</button> //For addition
<button ng-click="total = first - second">Sub</button> //For subtraction
<button ng-click="total = first * second">Mul</button> //For multiplication
<button ng-click="total = first / second">Div</button> //For division
</div>
<label class="result">Result: {{total}}</label>
</fieldset>
</div>
</body>
</html>
In the below form :
<fieldset>
<h2>Calculator</h2>
<dl>
<dt>First No :</dt>
<dd><input type="text" ng-model="first" /></dd>
<dt>Second No :</dt>
<dd><input type="text" ng-model="second" /></dd>
<div class="clr"></div>
</dl>
<div class="operations">
<button ng-click="total = first -- second">Add</button> //For addition
<button ng-click="total = first - second">Sub</button> //For subtraction
<button ng-click="total = first * second">Mul</button> //For multiplication
<button ng-click="total = first / second">Div</button> //For division
</div>
<label class="result">Result: {{total}}</label>
</fieldset>
the two input fields takes the input and in the buttons on click calls the ng-click which performs the calculation accordingly and sets the result in
<label class="result">Result: {{total}}</label>
0 Comment(s)