Expression in Angular JS | Code By Topic

Expression in Angular JS

On By

Angular JS Expression
We all aware about the expression. Expression are group of  symbol, operator like + -,number,character etc that show the value of something.For example 5*4 is expression. In JavaScript Expression are used to bind the data into HTML. There are very small difference between JavaScript and Angular JS expression.Its because Angular JS has its own methodology to parse the expression.In Angular JS you have to use {{ }} and put the expression inside this curly braces.Expression behavior just like a ng-bind directive.Here i give some example for the same.

Angular JS Expression Example 1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <h2>Angular Js Expression Example 1</h2>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="">
       <p>Angular JS Expression : {{ 15 + 5 }}</p>
</div>
</body>
</html>

Output Example 1

Angular JS Expression : 20

Angular JS Expression Example 2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular Js Expression example 2</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <div ng-init="item=3;price=5">
            <p>Total Price: {{item * price}}</p>
        </div>
    </div>
</body>
</html>

Output Example 2

Total Price: 15

Angular JS Expression Example 3

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular Js Expression example 3</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <div ng-init="city='Delhi';country='India'">
            <p>String Concat Example : {{city +" "+ country}}</p>
        </div>
    </div>
</body>
</html>

Output Example 2

String Concat Example : Delhi India

Angular Js Expression Example 4

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular Js Expression example 4</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <div ng-init="Emplyee = {FirstName:'XYZ',LastName:'ABC',EmployeeId:101}">
            <p>Hello {{Emplyee.FirstName + " " + Emplyee.LastName}}!</p>
            <p>Your Emaployee Id is: {{Emplyee.EmployeeId}}</p>
        </div>
    </div>
</body>
</html>

Output Example 4

Hello XYZ ABC!
Your Emaployee Id is: 101
Like This Post? Please share!

You May Also Like...

0 comments:

Post a Comment