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>