- Angular JS binds data to HTML using Expressions.
- Angular JS expressions can be written inside double braces: {{expression}}.
- Angular JS expressions are much like JavaScript Expressions: They can contain Literals, Operators and Variables.
Example 1:
<input type="text" ng-model="FirstName" placeholder="Enter First Name" />
<input type="text" ng-model="SecondName" placeholder="Enter Second Name" />
My name is: <span style="color:red"> {{FirstName}} {{SecondName}} </span>
The above example is an expression is an example of binding an expression
Output:
Example 2:
<div ng-init="a=5; b=10;">
Addition of {{a}} and {{b}} is : {{a+b}}<br />
Subtraction of {{a}} and {{b}} is : {{b-a}}<br />
Multiplication of {{a}} and {{b}} is : {{a*b}}<br />
Division of {{a}} and {{b}} is : {{b/a}}
</div>
The ng-init directive initialize the application data like we declare a variable.
Output:
Example 3:
<div ng-init="Employee={Id:'100', Name:'Rohit'}">
Employee id {{Employee.Id}} and name is {{Employee.Name}}
</div>
The above example is Angular Js Objects.
Output:
Example 4
<div ng-init="Numbers=[100,200,300,400,500]">
{{Numbers[4]}}
</div>
The above example is of Angular Js Array.
--------------------------------------------------------------------------------------------------
If you sum up all the above example into one single file, it looks like
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="text" ng-model="FirstName" placeholder="Enter First Name" /> <br />
<input type="text" ng-model="SecondName" placeholder="Enter Second Name" /> <br />
My Name name is: <span style="color:red"> {{FirstName}} {{SecondName}} </span>
<br /><br />
<div ng-init="a=5; b=10;">
Addition of {{a}} and {{b}} is : {{a+b}}<br />
Subtraction of {{a}} and {{b}} is : {{b-a}}<br />
Multiplication of {{a}} and {{b}} is : {{a*b}}<br />
Division of {{a}} and {{b}} is : {{b/a}}
</div>
<br /><br />
<div ng-init="Employee={Id:'100', Name:'Rohit'}">
Employee id {{Employee.Id}} and name is {{Employee.Name}}
</div>
<br /><br />
<div ng-init="Numbers=[100,200,300,400,500]">
{{Numbers[4]}}
</div>
</body>
</html>
No comments:
Post a Comment