Listen Software Solutions

Overview: This demonstration show how to build an calculator using AngularJS. A stack is used to evaluate the numbers to be operated on. If the user inputs multiple operand, one after another then the last operand is used. Pressing an operating after two number have been inputted causes the expression to be evaluated. Each button has an ngclick function called InputNumbers that passes a parameter. The parameter is evaluated to generate an output to the CalculatorDisplay variable.

Angular Controller

var myApp=angular.module('CalculatorApp', []);

myApp.controller('CalculatorController', function ($scope) {
    $scope.CalculatorDisplay = '';
    var stack = [];
    var iValue1, iValue2, iSum, sOperand;
    var iNumber = 0;
    var bNewNumber = false;
    var sGlobalLastInputted = '';
    var iLastValue;

    $scope.inputNumbers = function (paramValue) {
        if (paramValue == 'Clear')
        {
            stack = [];
            $scope.CalculatorDisplay = '';
            bNewNumber = false;
            return;
        }
        else if(paramValue == 'Toggle')
        {
            $scope.CalculatorDisplay = $scope.CalculatorDisplay * -1;
            return;
        }
        if ((paramValue == '+') || (paramValue == '/') || (paramValue == '*') || (paramValue == '-') || (paramValue == '='))
        {
            /*swap out the last operand with the current operand*/
            var sLastElementOnStack=stack[stack.length-1];
            if ((sLastElementOnStack == '+') || (sLastElementOnStack == '/') || (sLastElementOnStack == '*') || (sLastElementOnStack == '-') )
            {
                if (paramValue != '=')
                {
                    stack[stack.length - 1] = paramValue;
                }
            }
            /*Swap last operand with current operand*/
            if (sGlobalLastInputted != '=') {
                if (IsANumber(sGlobalLastInputted) == false) {
                    sGlobalLastInputted = paramValue;
                    return;
                }
                iNumber = eval($scope.CalculatorDisplay);
                stack.push(iNumber);
            }
            /* equal is press more than once*/
            else {
                if (stack.length < 3)  {
                    sGlobalLastInputted = paramValue;
                    bNewNumber = true;
                    if (sGlobalLastInputted != '=') {
                        stack.push(paramValue);
                        sGlobalLastInputted = '';
                    }
                    return;
                }
            }

            sGlobalLastInputted = paramValue;

            if (stack.length > 2) {
                iValue2 = stack.pop();
                sOperand = stack.pop();
                iValue1 = stack.pop();
                iLastValue = iValue1;
                iSum = parseTotal(iValue1, sOperand, iValue2);
                stack = [];
                stack.push(iSum);


                
                if (paramValue != '=')
                {
                    stack.push(paramValue)
                }
                $scope.CalculatorDisplay = iSum;


                //var log = [];
                //angular.forEach(stack, function (value, key) {
                    //alert(key + ':' + value);
                    //$scope.StackList.push(key + ': ' + value );
                //}, log);

            }
            else
            {
                stack.push(paramValue)
            }
            bNewNumber = true;
        }
            /*A number was input*/
        else
        {
            sGlobalLastInputted = paramValue;
            if (bNewNumber == true)
            {
                $scope.CalculatorDisplay = paramValue;
                bNewNumber = false;
            }
            else
            {
                if (IsANumber($scope.CalculatorDisplay+paramValue.toString()) == true)
                {
                    $scope.CalculatorDisplay = $scope.CalculatorDisplay + paramValue.toString();
                }
                
            }
        }
        
    };
   });

function IsANumber(sVal)
{
    var strText;
    var sData;
    var bPass=false;
    var regx = /^\-{0,1}[0-9]+\.{0,1}[0-9]*$/;
       
    bPass=regx.test(sVal);

    return(bPass);

}
function parseTotal(iValue1,sOperand,iValue2)
{
    var iRetVal = 0;
    if (sOperand=='+')
    {
        iRetVal = iValue1 + iValue2;
    }
    else if (sOperand == '/')
    {
        iRetVal = iValue1 / iValue2;
    }
    else if (sOperand == '*') {
        iRetVal = iValue1 * iValue2;
    }
    else if (sOperand == '-') {
        iRetVal = iValue1 - iValue2;
    }
    return (iRetVal);
}

HTML


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Calculator</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet">
    <script src="/Scripts/angular.min.js"></script>
    <script src="/Scripts/calculator_controller.js"></script>
    <style lang="css/text">
        #myCalculatorDisplay {
            width: 100%;
            height: 40px;
            border: 1px solid #bed5cd;
            overflow-x: scroll;
            overflow-y: hidden;
        }

        .cal-wrapper {
            max-width: 900px;
            margin: 0 auto;
            padding: 60px 0;
            //background: #f16a59;
            position: relative;
            overflow: hidden;
        }

            .cal-wrapper:after {
                content: '';
                width: 500px;
                height: 900px;
                position: absolute;
                //background: #9C27B0;
                z-index: 9;
                bottom: -50%;
                right: -100px;
                //transform:rotate(45deg);
            }

            .cal-wrapper .cal {
                max-width: 350px;
                overflow: hidden;
                position: relative;
                z-index: 10;
                padding: 30px 0;
                //box-shadow:inset 1px 1px 1px 0 rgba(0, 0, 0, 0.2);
                margin: 0 auto;
                //background-image: -moz-linear-gradient( -30deg, rgb(239,80,80) 0%, #9C27B0 100%);
                //background-image: -webkit-linear-gradient( -30deg, rgb(239,80,80) 0%, #9C27B0 100%);
                //background-image: -ms-linear-gradient( -30deg, rgb(239,80,80) 0%, #9C27B0 100%);
            }

                .cal-wrapper .cal .cal-process {
                    padding: 5px 15px;
                    color: #fff;
                    text-align: right;
                    font-size: 30px;
                }

                .cal-wrapper .cal .cal-answer {
                    font-size: 40px;
                    color: #fff;
                    text-align: right;
                    padding: 5px 15px;
                }

                .cal-wrapper .cal .numbers .single {
                    display: block;
                    text-align: center;
                    padding: 10px;
                    font-size: 24px;
                    color: #fff;
                }

                .cal-wrapper .cal .numbers .btn {
                    background: transparent;
                    outline: 0;
                    border-radius: 0;
                }

                    .cal-wrapper .cal .numbers .btn span {
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        display: block;
                        margin: 0 auto;
                        border-radius: 50%;
                        transition: all 0.4s ease-in-out;
                    }

                    .cal-wrapper .cal .numbers .btn:hover span {
                        //background: rgba(255,255,255,0.2);
                    }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div ng-app="CalculatorApp">
            <div class="row" ng-controller="CalculatorController">

                <div class="col-md-12 col-lg-12 col-sm-12">
                    <div class="cal-wrapper">
                        <div class="cal">
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-xs-12">
                                    <div>{{ CalculatorDisplay }}</div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4 col-md-4 col-xs-4">
                                    <button class="btn btn-info btn-block " ng-model="clear" ng-click="inputNumbers('Clear')">C</button>
                                </div>
                                <div class="col-lg-4 col-md-4 col-xs-4">
                                    <button class="btn btn-info btn-block" ng-model="clear" ng-click="inputNumbers('Toggle')">+/-</button>
                                </div>
                                <div class="col-lg-3 col-md-3 col-xs-3 col-lg-offset-1 col-md-offset-1 col-xs-offset-1">
                                    <button class="btn btn-info btn-block" value="/" ng-model="divide" ng-click="inputNumbers('/')">/</button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-primary btn-block" value="1" ng-model="Button1" ng-click="inputNumbers(1)">1</button>
                                </div>
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-primary btn-block" value="2" ng-model="2" ng-click="inputNumbers(2)">2</button>
                                </div>
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-primary btn-block" type="button" value="3" ng-model="3" ng-click="inputNumbers(3)">3</button>
                                </div>
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-info btn-block" type="button" value="X" ng-model="multiple" ng-click="inputNumbers('*')">*</button>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-primary btn-block" type="button" value="4" ng-model="4" ng-click="inputNumbers(4)">4</button>
                                </div>
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-primary btn-block" type="button" value="5" ng-model="5" ng-click="inputNumbers(5)">5</button>
                                </div>
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-primary btn-block" type="button" value="6" ng-model="6" ng-click="inputNumbers(6)">6</button>
                                </div>
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-info btn-block" type="button" value="-" ng-model="minus" ng-click="inputNumbers('-')">-</button>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-primary btn-block" type="button" value="7" ng-model="7" ng-click="inputNumbers(7)">7</button>
                                </div>
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-primary btn-block" type="button" value="8" ng-model="8" ng-click="inputNumbers(8)">8</button>
                                </div>
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-primary btn-block" type="button" value="9" ng-model="9" ng-click="inputNumbers(9)">9</button>
                                </div>
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-info btn-block" type="button" value="+" ng-model="plus" ng-click="inputNumbers('+')">+</button>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-xs-6">
                                    <button class="btn btn-primary btn-block" type="button" value="0" ng-model="0" ng-click="inputNumbers(0)">0</button>
                                </div>
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-primary btn-block" type="button" value="." ng-model="period" ng-click="inputNumbers('.')">.</button>
                                </div>
                                <div class="col-lg-3 col-md-3 col-xs-3">
                                    <button class="btn btn-info btn-block" type="button" value="=" ng-model="equals" ng-click="inputNumbers('=')">=</button>
                                </div>

                            </div>


                        </div> <!--cal-->
                    </div> <!--cal wrapper-->
                </div> <!--Row-->
            </div> <!--Controller-->
        </div> <!--App-->
    </div> <!--Container-->

    <script src="/Scripts/jquery-1.9.1.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>

</body>
</html>

ASP.NET - Javascript Angular JS - How to create a Calculator

Angular Controller

HTML