Mathematical operations in angularjs.

The ng-app Directive. The ng-app directive defines the root element of an AngularJS application.
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="en">
<head>
    <title>Anguler JS Demo</title>
    <linkhref="bootstrap.min.css"rel="stylesheet"/>
    <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
</head>
<bodyng-app=""class="container">
    <br/>
    <divclass="row">
        <divclass="col-md-6">
            <divclass="well well-sm">
                Addition
            </div>
            <divclass="row">
                <divclass="col-md-12">
                    <label>Enter Number</label>
                    <inputtype="number"ng-model="Num1"class="form-control text-success"/><br/>
                </div>
            </div>
            <divclass="row">
                <divclass="col-md-12">
                    <label>Enter Number</label>
                    <inputtype="number"ng-model="Num2"class="form-control text-success"/><br/>
                </div>
            </div>
            <divclass="row">
                <divclass="col-md-12">
                    <label>Result</label>
                    <inputreadonly="readonly"type="text"value="{{Num1+Num2}}"class="form-control text-info"/>
                </div>
            </div>
        </div>
        <divclass="col-md-6">
            <divclass="well well-sm">
                Subtraction
            </div>
            <divclass="row">
                <divclass="col-md-12">
                    <label>Enter Number</label>
                    <inputtype="number"ng-model="Num3"class="form-control text-success"/><br/>
                </div>
            </div>
            <divclass="row">
                <divclass="col-md-12">
                    <label>Enter Number</label>
                    <inputtype="number"ng-model="Num4"class="form-control text-success"/><br/>
                </div>
            </div>
            <divclass="row">
                <divclass="col-md-12">
                    <label>Result</label>
                    <inputreadonly="readonly"type="text"value="{{Num3-Num4}}"class="form-control text-info"/>
                </div>
            </div>
        </div>
    </div>
    <br/>
    <divclass="row">
        <divclass="col-md-6">
            <divclass="well well-sm"style="padding: 10px">
                Division
            </div>
            <divclass="row">
 
                <divclass="col-md-12">
                    <label>Enter Number</label>
                    <inputtype="text"ng-model="Num5"class="form-control text-success"/><br/>
                </div>
            </div>
            <divclass="row">
                <divclass="col-md-12">
                    <label>Enter Number</label>
                    <inputtype="text"ng-model="Num6"class="form-control text-success"/><br/>
                </div>
            </div>
            <divclass="row">
                <divclass="col-md-12">
                    <label>Result</label>
                    <inputreadonly="readonly"type="text"value="{{Num5/Num6}}"class="form-control text-info"/>
                </div>
            </div>
        </div>
        <divclass="col-md-6">
            <divclass="well well-sm">
                Multiply
            </div>
            <divclass="row">
                <divclass="col-md-12">
                    <label>Enter Number</label>
                    <inputtype="number"ng-model="Num7"class="form-control text-success"/><br/>
                </div>
            </div>
            <divclass="row">
                <divclass="col-md-12">
                    <label>Enter Number</label>
                    <inputtype="number"ng-model="Num8"class="form-control text-success"/><br/>
                </div>
            </div>
            <divclass="row">
                <divclass="col-md-12">
                    <label>Result</label>
                    <inputreadonly="readonly"type="text"value="{{Num7*Num8}}"class="form-control text-info"/>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Result
blog

Mathematical operations in angularjs.

Anonymous User

Leave Comment

Comments

Liked By
