Home > DeveloperSection > Blogs > Mathematical operations in angularjs.

Mathematical operations in angularjs.


Angular JS JQuery  Angular JS 
Ratings:
0 Comment(s)
 494  View(s)
Rate this:
The ng-app Directive. The ng-app directive defines the root element of an AngularJS application.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>

    <title>Anguler JS Demo</title>

    <link href="bootstrap.min.css" rel="stylesheet" />

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>

</head>

<body ng-app="" class="container">

    <br />

    <div class="row">

        <div class="col-md-6">

            <div class="well well-sm">

                Addition

            </div>

            <div class="row">

                <div class="col-md-12">

                    <label>Enter Number</label>

                    <input type="number" ng-model="Num1" class="form-control text-success" /><br />

                </div>

            </div>

            <div class="row">

                <div class="col-md-12">

                    <label>Enter Number</label>

                    <input type="number" ng-model="Num2" class="form-control text-success" /><br />

                </div>

            </div>

            <div class="row">

                <div class="col-md-12">

                    <label>Result</label>

                    <input readonly="readonly" type="text" value="{{Num1 + Num2}}" class="form-control text-info" />

                </div>

            </div>

        </div>

        <div class="col-md-6">

            <div class="well well-sm">

                Subtraction

            </div>

            <div class="row">

                <div class="col-md-12">

                    <label>Enter Number</label>

                    <input type="number" ng-model="Num3" class="form-control text-success" /><br />

                </div>

            </div>

            <div class="row">

                <div class="col-md-12">

                    <label>Enter Number</label>

                    <input type="number" ng-model="Num4" class="form-control text-success" /><br />

                </div>

            </div>

            <div class="row">

                <div class="col-md-12">

                    <label>Result</label>

                    <input readonly="readonly" type="text" value="{{Num3 - Num4}}" class="form-control text-info" />

                </div>

            </div>

        </div>

    </div>

    <br />

    <div class="row">

        <div class="col-md-6">

            <div class="well well-sm" style="padding: 10px">

                Division

            </div>

            <div class="row">

 

                <div class="col-md-12">

                    <label>Enter Number</label>

                    <input type="text" ng-model="Num5" class="form-control text-success" /><br />

                </div>

            </div>

            <div class="row">

                <div class="col-md-12">

                    <label>Enter Number</label>

                    <input type="text" ng-model="Num6" class="form-control text-success" /><br />

                </div>

            </div>

            <div class="row">

                <div class="col-md-12">

                    <label>Result</label>

                    <input readonly="readonly" type="text" value="{{Num5 / Num6}}" class="form-control text-info" />

                </div>

            </div>

        </div>

        <div class="col-md-6">

            <div class="well well-sm">

                Multiply

            </div>

            <div class="row">

                <div class="col-md-12">

                    <label>Enter Number</label>

                    <input type="number" ng-model="Num7" class="form-control text-success" /><br />

                </div>

            </div>

            <div class="row">

                <div class="col-md-12">

                    <label>Enter Number</label>

                    <input type="number" ng-model="Num8" class="form-control text-success" /><br />

                </div>

            </div>

            <div class="row">

                <div class="col-md-12">

                    <label>Result</label>

                    <input readonly="readonly" type="text" value="{{Num7 * Num8}}" class="form-control text-info" />

                </div>

            </div>

        </div>

    </div>

</body>

</html>

Result


 


Don't want to miss updates? Please click the below button!

Follow MindStick