Expression in AngularJs (Part2)


Expression_Example

AngularJs expression is used to bind the data in HTML and It is used to write inside the {{  }}. It is the alternative of ng-bind directive. It will display the output where expression has been written.

Sample Code for integer data

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>



<div ng-app="">



 Addition of 2 Num : {{ 10+20 }} 


    </div>



</body>
</html>

Note: Here we have injected ng-app so it is doing addition. If we will remove then it will not work.

Sample code for Multiplication of 2 Num

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>



<div ng-app="" ng-init="Num1=10; Num2=20">


 Multiplication of 2 Num : {{ Num1 * Num2 }} 

    </div>



</body>
</html>

Note: Here ng-init is used to initialize the data.

For String Concatenation Example


<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>



<div ng-app="" ng-init="FirstName='Chandradev'; LastName='Prasad'">


 String Concatenation : {{ FirstName + " " + LastName }} 

    </div>



</body>
</html>

Note : Here same things can do using ng-bind like this





<div ng-app="" ng-init="FirstName='Chandradev';LastName='Prasad'">


 String Concatenation :  <span ng-bind=" FirstName + ' ' + LastName" ></span>   

</div>



Angular Object Example


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>




<div ng-app="" ng-init= "Emp={FirstName :'Chandradev', LastName:'Prasad'}">


 Emp Name :  {{ Emp.LastName }} 

    </div>




</body>
</html>

Array example in Angular


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>




<div ng-app="" ng-init= "Numbers=[1,4,6,8,10]">


 4th Num:  {{ Numbers[3]}} 

    </div>




</body>
</html>

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.