AngularJS Calculator – AngularJS Material Design Calculator Demo

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.

View DemoGit Code

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,&quot;.&quot;,0,&quot;00&quot;]" 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(&quot;/&quot;)">/</md-button>
                        </md-grid-tile>
						<!-- md-grid-list -->
                        <md-grid-tile class="control">
							<!-- md-button -->
                            <md-button flex ng-click="input(&quot;*&quot;)">x</md-button>
                        </md-grid-tile>
						<!-- md-grid-list -->
                        <md-grid-tile class="control">
							<!-- md-button -->
                            <md-button flex ng-click="input(&quot;-&quot;)">-</md-button>
                        </md-grid-tile>
						<!-- md-grid-list -->
                        <md-grid-tile class="control">
							<!-- md-button -->
                            <md-button flex ng-click="input(&quot;+&quot;)">+</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

Leave a Comment

Your email address will not be published. Required fields are marked *

57  +    =  60

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US