Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Use Angularjs Expression to resolve expressions

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 1.02k
    Comment on it

    Hii,
     This blog is in continuation with my previous blogs on AngularJs, In this blog i am sharing a simple example in which i have used few AngularJs directives like ng-app, ng-init, ng-model and an AngularJs expression.
    1)ng-app directive is used to initialise an AngularJS application.
    2) ng-init directive is used to initialise application data.
    3) ng-model directive is used to bind any html control's value to an application data.

    Example:1 In the example given below an AngularJs expression is used inside which whatever formula is defined will read the input,resolve the expressions and the output will be the calculated value,

    Here's the code

    <div ng-app="" class="main">
    <div style="border-bottom:2px solid #000;" ng-init="principal=1200;rate=15;intrest=2;time=10">
    <h1>Calculate Simple Interest</h1>
     <p> <label>Principal:</label> <input type="text" ng-model="principal"></p>
    <p> <label>Rate:</label> <input type="text" ng-model="rate"></p>
    <p> <label>Intrest:</label> <input type="text" ng-model="intrest"></p>
    <p> <label>Time:</label> <input type="text" ng-model="time"></p>
    <p class="output"><label>SI: </label>{{ principal * rate * intrest / time }}</p>
    </div>
    <div style="border-bottom:2px solid #000;" ng-init="Distance=1500;timeTwo=10">
    <h1>Calculate Speed</h1>
     <p><label>Distance:</label> <input type="text" ng-model="Distance"></p>
    <p> <label>Time:</label> <input type="text" ng-model="timeTwo"></p>
    <p class="output"><label>Speed:</label> {{ Distance / timeTwo }}</p>
    </div>
    <div ng-init="Mass=2500;Acceleration=1400">
    <h1>Calculate Force</h1>
     <p><label>Mass:</label> <input type="text" ng-model="Mass"></p>
    <p> <label>Time:</label> <input type="text" ng-model="Acceleration"></p>
    <p class="output"><label>Force:</label> {{ Mass / Acceleration }}</p>
    </div>
    
    </div>


    CSS:

    div.main{max-width:500px;padding:25px;text-align:center;
    background: rgba(210,255,82,1);
    background: -moz-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(210,255,82,1) 3%, rgba(139,164,28,1) 59%,
    rgba(117,137,12,1) 76%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(210,255,82,1)), color-stop(3%,
    rgba(210,255,82,1)), color-stop(59%, rgba(139,164,28,1)), color-stop(76%, rgba(117,137,12,1)));
    background: -webkit-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(210,255,82,1) 3%, rgba(139,164,28,1) 59%,
    rgba(117,137,12,1) 76%);
    background: -o-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(210,255,82,1) 3%, rgba(139,164,28,1) 59%,
    rgba(117,137,12,1) 76%);
    background: -ms-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(210,255,82,1) 3%, rgba(139,164,28,1) 59%,
    rgba(117,137,12,1) 76%);
    background: linear-gradient(to right, rgba(210,255,82,1) 0%, rgba(210,255,82,1) 3%, rgba(139,164,28,1) 59%,
    rgba(117,137,12,1) 76%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#75890c', GradientType=1 );
    margin:20px auto;
    }
    label{float: left;margin-left: 50px;text-align: left;width: 150px;}
    input{width:200px;}
    .output{font-weight:bold;font-size:25px;}

    Note:Must include this link in your file

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    Use Angularjs Expression to resolve expressions

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: