Expression
AngularJS expression is like JavaScript expression surrounded with braces - {{ expression }}. AngularJS evaluates the specified expression and binds the result data to HTML.
AngularJS expression can contain literals, operators and variables like JavaScript expression. For example, an expression {{2/2}} will produce the result 1 and will be bound to HTML.
AnularJS expressions are very similar to JavaScript expressions. They can contain literals, operators, and variables. For example:
{{ 5 + 5 }} or {{ firstName + " " + lastName }}
Example:
<html>
<script src="angular.min.js"></script>
<body>
<h2>Expression</h2>
<div ng-app>
<p>A simple expression example: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Note: If you remove the directive "ng-app", HTML will display the expression without solving it.
<html>
<script src="angular.min.js"></script>
<body>
<p>If you remove the directive "ng-app", HTML will display the expression without solving it.</p>
<div>
<p>A simple expression example: {{ 5 + 5 }}</p>
</div>
</body>
</html>
<html >
<head>
<script src="angular.min.js"></script>
</head>
<body >
<h2>Simple mathematics calculation<br> Expression:</h2>
<div ng-app>
2 + 2 = {{2 + 2}} <br />
2 - 2 = {{2 - 2}} <br />
2 * 2 = {{2 * 2}} <br />
2 / 2 = {{2 / 2}}
</div>
</body>
</html>
AngularJS expression is like JavaScript code expression except for the following differences:
AngularJS expression cannot contain conditions, loops, exceptions or regular expressions
e.g. if-else, ternary, for loop, while loop etc.
AngularJS expression cannot declare functions.
AngularJS expression cannot contain comma or void.
AngularJS expression cannot contain return keyword.
AngularJS expression contains literals of any data type.
2) Other Expression.
<html >
<head>
<script src="angular.min.js"></script>
</head>
<body >
<h1>Other Expression Demo:</h1>
<div ng-app>
{{"Hello World"}}<br />
{{100}}<br />
{{true}}<br />
{{10.2}}
</div>
</body>
</html>
AngularJS expression can contain arithmetic operators which will produce the result based on the type of operands, similar to JavaScript:
3) Operands Expression
<html >
<head>
<script src="angular.min.js"></script>
</head>
<body >
<h2>operands Expression:</h2>
<div ng-app>
{{"Hello" + " World"}}<br />
{{100 + 100 }}<br />
{{true + false}}<br />
{{10.2 + 10.2}}<br />
</div>
</body>
</html>
AngularJS expression can contain variables declared via ng-init directive. The ng-init directive is used to declare AngularJS application variables of any data type.
4) ng-init directive.
<html >
<head>
<script src="angular.min.js"></script>
</head>
<body >
<div ng-app ng-init="greet='Hello World!';
amount= 10000;
rateOfInterest = 10.5;
duration=10;
myArr = [100, 200];
person = { firstName:'Govinda', lastName :'Prasad'}">
{{ (amount * rateOfInterest * duration)/100 }}<br />
{{myArr[1]}} <br />
{{person.firstName + " " + person.lastName}}
</div>
</body>
</html>
The background color of the input box will be whatever you write in the input field in bellow example
2) Change the value of the input field change
<html>
<script src="angular.min.js"></script>
<body>
<p>Change the value of the input field:</p>
<div ng-app="" ng-init="myCol='pink'">
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
</body>
</html>
For
More Explanation
&
Online Classes
More Explanation
&
Online Classes
Contact Us:
+919885348743
+919885348743