Saturday, February 20, 2016

Calculator with Angular JS

Unknown 1:44 AM js No comments

Intoduction :-
Hii Friends...

Today I explain how to make a Calculator with the help of Angular JS. In this code i use some directives like data-ng-app , data-ng-init , ng-model. And i already explained these terms in my first post i.e Angular Directives . So now here i direct put my code.

DEMO

Calculator

Quantity: Price:

Result: {{quantity * price}}

Example :-

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div style="height: 225px; width: 405px; border: 2px groove rgb(36, 159, 163); text-align: center;">
<div data-ng-app="" data-ng-init="quantity=2;price=5">

<h2 style="color:rgb(36, 159, 163);">Calculator</h2>

Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">

<p><b>Result:</b> {{quantity * price}}</p>

</div>
</div>
</body>
</html>

0 comments:

Post a Comment