« Previous Page Next Page »
    

Introduction to AngularJs Expression.

POSTED

AUTHOR: VARUN SINGH

In this tutorials, I am going to introduce about AngularJs Expression with some good and effective examples. AngularJs Expression can be written inside double braces: {{ expression }} . You can write AngularJs Expression inside CSS properties : color: {{ expression }} . AngularJs Expression can also be written inside a directive: ng-bind="expression" .
AngularJS will resolve the expression, and return the result exactly where the expression is written. AngularJs Expression are much like JavaScript expressions: They can contain literals, operators, and variables. Today I will introduce all about AngularJs Expression with suitable examples .



You can write expressions wherever you want, AngularJS will simply resolve the expression and return the result. Expression can change CSS properties of your page.


Add and Multiply two numbers using AngularJS Expression:


<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="" ng-init="num1=20;num2=30">

<p>Addition of two numbers: {{ num1 + num2 }}</p>

<p>Multiplication of two numbers: {{ num1 * num2 }}</p>

</div>

</body>
</html>


Try it Yourself

Here I am going to concatenate two strings using AngularJS Expression:


<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="" ng-init="firstName='Coder';lastName='Glass'">

<p>The full name is: {{ firstName + " " + lastName }}</p>

</div>

</body>
</html>


Try it Yourself



Here I am going to print Array value using AngularJS Expression:


<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="" ng-init="num=[10,20,30,40,50]">

<p>The value of 4th position is: {{ num[3] }}</p>

</div>

</body>
</html>


Try it Yourself

Here I am going to print value of object using AngularJS Expression:


<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="" ng-init="company={firstName:'Coder',lastName:'Glass'}">

<p>The name is {{ company.lastName }}</p>

</div>

</body>
</html>


Try it Yourself

Here I am going to change the value of input field and and color of input field and also going to change the color of paragraph of your html page after applying expression in css properties.


<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<p>Change the value and background of the input field:</p>

<div ng-app="" ng-init="myCol='green'">

<input style="color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
 <p>You can write expressions wherever you want:</p>
 <p style="color: {{myCol}}" >Your expression is: {{myCol}} </p>
 
</div>

</body>
</html>


Try it Yourself



The End:

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Google + and Twitter. I need your support to continue.

« Previous Page Next Page »

Comments: