AngularJS Expression
AjgularJS bind data with HTML, Expression help to do this. An AjgularJs expression is written under two curly brackets {{Expression}}.An expression can be written insert a directive also.
AjgularJs expression are purely JavaScript expression, place expression where necessary , AjgularJs will resolve the expression.
1)Expression can work on numeric data
Numeric data manipulation , plus , minus ,multiply etc. can be done with expression.
2)Expression can work on string data
String data manipulation , concatenation , sub string etc. can be done with expression.
3)Simple mathematical operation can be execute an expression
Numeric mathematical operation can be done with expression.
4)Expression can work on object
5)Expression can work on array
6)Expression can work on AngularJS variable
7)Expression works on ternary operator
Ternary operator ( ? ) syntax
Condition ? first_expression : second_expression
It is a kind of if else statement.
8)Expression can be bind
An expression can be bing with Html object.
AjgularJS bind data with HTML, Expression help to do this. An AjgularJs expression is written under two curly brackets {{Expression}}.An expression can be written insert a directive also.
AjgularJs expression are purely JavaScript expression, place expression where necessary , AjgularJs will resolve the expression.
1)Expression can work on numeric data
Numeric data manipulation , plus , minus ,multiply etc. can be done with expression.
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div
ng-app="">
<p>{{2+2}}</p>
</div>
</body>
Output: 4
2)Expression can work on string data
String data manipulation , concatenation , sub string etc. can be done with expression.
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div
ng-app="">
<p>{{"I
am learning "+"AngularJS"}}</p>
</div>
</body>
Output:
I
am learning AngularJS
3)Simple mathematical operation can be execute an expression
Numeric mathematical operation can be done with expression.
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div
ng-app="">
<p>{{5*6}}</p>
</div>
</body>
Output:
30
4)Expression can work on object
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body
ng-app
=
"myapp">
<script>
angular.module("myapp",
[])
.controller("myController",
function
($scope) {
$scope.person
=
{
name:
"User 1",
phones:
[{ number: 12345}]
};
});
</script>
<div
ng-controller
=
"myController"
>
<h2>{{person.name}}
</h2>
</div>
</body>
Output:
User
1
5)Expression can work on array
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div
ng-app=""
ng-init=" slNo=[11,22,33]">
<span>You
Number :</span><span>{{slNo[2]}}</span><br
/>
</div>
</body>
Output:
You Number :33
6)Expression can work on AngularJS variable
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div
ng-app=""
ng-init="Name='John';
Age=4;Height=5">
<span>Name
:</span><span>{{Name}}</span><br
/>
<span>Age
:</span><span>{{Age}}</span><br
/>
<span>Height
:</span><span>{{Height}}</span>
</div>
</body>
Output:
Name
:John
Age :4
Height :5
Age :4
Height :5
7)Expression works on ternary operator
Ternary operator ( ? ) syntax
Condition ? first_expression : second_expression
It is a kind of if else statement.
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body
ng-app="myapp">
<script>
angular.module("myapp",
[])
.controller("myController",
function
($scope) {
$scope.student
= [
{
name:
"studnet 1",
age:
12
},
{
name:
"studnet 2",
age:
18
},
{
name:
"studnet 3",
age:
30
}
]
});
</script>
<div
ng-app="myApp">
<div
ng-controller="myController">
<table
border="1"
cellpadding="0"
cellspacing="0">
<tr
ng-repeat="obj
in student">
<td>
{{obj.name}}
</td>
<td>
{{obj.age}}
</td>
<td>
{{
obj.age >= 18 ? 'Adult' : 'Child' }}
</td>
</tr>
</table>
</div>
</div>
</body>
Output:
| studnet 1 | 12 | Child |
| studnet 2 | 18 | Adult |
| studnet 3 | 30 | Adult |
8)Expression can be bind
An expression can be bing with Html object.
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body
ng-app="">
Enter
a text <input
type="text"
ng-model="myText"
/>
<button
ng-click="displayText
= myText"
ng-init="displayText">Show
Text</button>
<p>Normal
Binding: {{ displayText }} </p>
</body>
What is the Difference between Javascript and AngularJS Expression
AngularJS (Valid Expression)
Javascript (Invalid Expression)
AngularJS (Valid Filter)
Javascript (Invalid Expression)
What is the Difference between Javascript and AngularJS Expression
- AngularJS expression can be written in HTML.Javascript does not allow to write expression in HTML.
AngularJS (Valid Expression)
{{Expression}}
Javascript (Invalid Expression)
{{Expression}}
- AngularJS expression allow to filter data , Javascript does not allow to filter data.
AngularJS (Valid Filter)
<ul>
<li
ng-repeat="obj
in myData | filter : 'x'">
{{
obj }}
</li>
</ul>
</div>
Javascript (Invalid Expression)
<ul>
<li
ng-repeat="obj
in myData | filter : 'x'">
{{
obj }}
</li>
</ul>
</div>
- AngularJS expressions can work with literals, operators, and variable.Javascript does not allow this kin of features.
No comments:
Post a Comment