Menu ▼


AngularJS expression numbers example

In this article we will see how to use AngularJS expression with numbers.

Example 1:
In this example we will bind Qty, UniPrice to input fields using ng-model, and write the expression for total price as {{ Qty*UnitPrice }}. If the value in the input controls change then the value in the expression will be updated automatically.

Enter Quantity :
Enter Unit Price :

Quantity : {{Qty}}
Unit Price : {{UnitPrice}}
Total Price : {{Qty*UnitPrice}}

Example 2:
In this example we will calculate the Percentage of amount for a given amount and percentage using expression {{ inputamt*inputpercent/100 }}.

Enter Amount :
Enter Percentage :

{{inputpercent}}% of {{inputamt}} is : {{inputamt*inputpercent/100}}
Example 3:
In this example we will calculate the Square root of a given number. by default Math function is not avialable in $scope object, for that we will define the Math function in $scope object as $scope.Math = window.Math; and write the expression for square root as {{ Math.sqrt(inputval) }}.

Enter Number :

Square root of {{inputval}} is : {{ Math.sqrt(inputval) }}

Source code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="SampleApp" ng-controller="SampleCntrl">
        <strong>Example 1:</strong>
        <br />
        In this example we will bind Qty, UniPrice to input fields using ng-model, and write
        the expression for total price as <strong>{{ <em>Qty*UnitPrice</em> }}</strong>.
        If the value in the input controls change then the value in the expression will
        be updated automatically.
        <br />
        <br />
        <table>
            <tr>
                <td>
                    Enter Quantity :
                </td>
                <td>
                    <input type="text" ng-model="Qty" /><br />
                </td>
            </tr>
            <tr>
                <td>
                    Enter Unit Price :
                </td>
                <td>
                    <input type="text" ng-model="UnitPrice" /><br />
                </td>
            </tr>
        </table>
        <br />
        Quantity : {{Qty}}<br />
        Unit Price : {{UnitPrice}}<br />
        Total Price : {{Qty*UnitPrice}}<br />
        <hr />
        <strong>Example 2:</strong>
        <br />
        In this example we will calculate the Percentage of amount for a given amount and
        percentage using expression <strong>{{ <em>inputamt*inputpercent/100</em> }}</strong>.
        <br />
        <br />
        <table>
            <tr>
                <td>
                    Enter Amount :
                </td>
                <td>
                    <input type="text" ng-model="inputamt" /><br />
                </td>
            </tr>
            <tr>
                <td>
                    Enter Percentage :
                </td>
                <td>
                    <input type="text" ng-model="inputpercent" /><br />
                </td>
            </tr>
        </table>
        <br />
        {{inputpercent}}% of {{inputamt}} is : {{inputamt*inputpercent/100}}
        <hr />
        <strong>Example 3:</strong>
        <br />
        In this example we will calculate the Square root of a given number. by default
        Math function is not avialable in $scope object, for that we will define the Math
        function in $scope object as <strong>$scope.Math = window.Math; </strong>and write
        the expression for square root as <strong>{{ <em>Math.sqrt(inputval)</em> }}</strong>.
        <br />
        <br />
        Enter Number :<input type="text" ng-model="inputval" /><br />
        <br />
        Square root of {{inputval}} is : {{ Math.sqrt(inputval) }}
    </div>
    <script>
        var myapp = angular.module("SampleApp", []);
        myapp.controller("SampleCntrl", function ($scope) {
            $scope.Qty = 5;
            $scope.UnitPrice = 6;
            $scope.inputval = 9;
            $scope.Math = window.Math;
            $scope.inputamt = 62.50;
            $scope.inputpercent = 14;
        });
    </script>
</body>
</html>





comments powered by Disqus


Search dotnetlearners.com