AngularJS Calculator – AngularJS Material Design Calculator Demo
AngularJS Calculator – In this post we will show you how to create AngularJS Calculator Material Design. It is vaer easy to execute and simple code of AngularJS Calculato.
Hear is link of code and demo link for AngularJS Calculator.
This code will help you to execute AngularJS Calculator
<body layout="column">
<!-- md-content -->
<md-content id="content" flex>
<!-- layout-align -->
<div layout="row" layout-align="spacearound" flex>
<!-- md-subheader -->
<md-subheader flex class="header">Angular Design Calculator - onlinecode</md-subheader>
</div>
<!-- ng-controller -->
<div ng-controller="CalcCtrl" class="calc md-whiteframe-z2">
<div layout="column" layout-padding ng-controller="DisplayCtrl" class="display">
<!-- layout-padding -->
<div flex layout="row" layout-padding layout-align="end center" class="up">
<div class="md-display-3">{{display}}</div>
</div>
<!-- layout-padding -->
<div flex layout="row" layout-padding layout-align="end center" class="bottom">
<div class="md-display-2">{{bottomDisplay}}</div>
</div>
</div>
<!-- ng-controller -->
<div layout="row" layout-wrap ng-controller="InputCtrl" class="controls">
<div flex="75">
<!-- md-row-height -->
<md-grid-list md-cols="3" md-row-height="4:4" md-gutter="0px">
<md-grid-tile ng-repeat="i in [9,8,7,6,5,4,3,2,1,".",0,"00"]" class="number">
<!-- md-button -->
<md-button flex ng-click="input(i)">{{i}}</md-button>
</md-grid-tile>
</md-grid-list>
</div>
<div flex="25">
<!-- md-grid-list -->
<md-grid-list md-cols="1" md-row-height="6:4" md-gutter="0px">
<!-- md-grid-list -->
<md-grid-tile class="control">
<!-- md-button -->
<md-button flex ng-click="input()">DEL</md-button>
</md-grid-tile>
<!-- md-grid-list -->
<md-grid-tile class="control">
<!-- md-button -->
<md-button flex ng-click="input("/")">/</md-button>
</md-grid-tile>
<!-- md-grid-list -->
<md-grid-tile class="control">
<!-- md-button -->
<md-button flex ng-click="input("*")">x</md-button>
</md-grid-tile>
<!-- md-grid-list -->
<md-grid-tile class="control">
<!-- md-button -->
<md-button flex ng-click="input("-")">-</md-button>
</md-grid-tile>
<!-- md-grid-list -->
<md-grid-tile class="control">
<!-- md-button -->
<md-button flex ng-click="input("+")">+</md-button>
</md-grid-tile>
<!-- md-grid-list -->
<md-grid-tile class="control">
<!-- md-button -->
<md-button flex ng-click="calculate()">=</md-button>
</md-grid-tile>
<!-- md-grid-list end -->
</md-grid-list>
</div>
</div>
</div>
</md-content>
<!-- bundle script-->
<script src="js/bundle.js"></script>
</body>
You also like Angularjs Moment Picker