Showing posts with label Expression. Show all posts
Showing posts with label Expression. Show all posts
Saturday, June 27, 2015
AngularJS Expressions using Arrays
In
the previous posts we saw AngularJS
expressions with string, numbers and Objects, in this post we shall see on
how to use AngularJS expressions
involving arrays.
AngularJS Expressions using String and Numbers
AngularJS Expressions using Objects
This comes in handy when we want to display a list of values, especially while using MVC pattern if we want to display a list/table of values we can get them in an array and use the array in ng-repeat to iterate through each element in the array.
In the following example we shall see on how to use arrays and display the content of the arrays using expressions in the view.
<html ng-app>
<head>
<meta charset="utf-8" />
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-init="Employees=[
{id:1,Name:'Tom'},
{id:2,Name:'Harry'},
{id:3,Name:'Peter'}]">
<ul>
<li ng-repeat="emp in Employees">
{{ emp.id }} - {{ emp.Name }}<br/>
</li>
</ul>
</div>
</body>
</html>
Output:
AngularJS Expressions using String and Numbers
AngularJS Expressions using Objects
This comes in handy when we want to display a list of values, especially while using MVC pattern if we want to display a list/table of values we can get them in an array and use the array in ng-repeat to iterate through each element in the array.
In the following example we shall see on how to use arrays and display the content of the arrays using expressions in the view.
<html ng-app>
<head>
<meta charset="utf-8" />
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-init="Employees=[
{id:1,Name:'Tom'},
{id:2,Name:'Harry'},
{id:3,Name:'Peter'}]">
<ul>
<li ng-repeat="emp in Employees">
{{ emp.id }} - {{ emp.Name }}<br/>
</li>
</ul>
</div>
</body>
</html>
Output:
Friday, June 26, 2015
AngularJS Expressions using Objects
In
the post AngularJS Expressions using String and Numbers, we saw on how to use
simple string and numbers in expressions,
we can also create complex objects and use them in expressions, this becomes more handy when we want to implement MVC
pattern using AngularJS, we can define model objects and use them in the View
layer to display model object properties.
The following example shows how to use Objects in Expressions
<html ng-app>
<head>
<meta charset="utf-8" />
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-init="Employee={name:'John',age:25,dob:'01-01-1990'}">
<p>Name :<b> {{ Employee.name }} </b></p>
<p>Age :<b> {{ Employee.age }} </b></p>
<p>DOB :<b> {{ Employee.dob }} </b></p>
</div>
</body>
</html>
Output:
The following example shows how to use Objects in Expressions
<html ng-app>
<head>
<meta charset="utf-8" />
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-init="Employee={name:'John',age:25,dob:'01-01-1990'}">
<p>Name :<b> {{ Employee.name }} </b></p>
<p>Age :<b> {{ Employee.age }} </b></p>
<p>DOB :<b> {{ Employee.dob }} </b></p>
</div>
</body>
</html>
Output:
AngularJS Expressions using String and Numbers
Expressions in AngularJS can operate on different types of variables / model
properties, the evaluation of expressions vary based on the type of variable / property
on which the expressions is evaluated.
For example an expression with 2 numbers and a + operator adds the values of the 2 numbers while evaluating the expressions. The same + operator when used with 2 string will do a string concatenation.
The following example shows how to use expressions with numbers and strings
For example an expression with 2 numbers and a + operator adds the values of the 2 numbers while evaluating the expressions. The same + operator when used with 2 string will do a string concatenation.
The following example shows how to use expressions with numbers and strings
What are AngularJS Expressions?
Expressions in AngularJS are a quick way to add
dynamic content from the model objects / variables to the HTML view,
expressions can evaluate multiple variables / model properties using operators
and display the evaluated result in the view.
Expressions are a short form of ng-bind, they provide the ability to do one-way data binding between the model and the view.
Expressions are enclosed within a couple of flower braces in the HTML view. Following is the Syntax for Expressions
Expressions are a short form of ng-bind, they provide the ability to do one-way data binding between the model and the view.
Expressions are enclosed within a couple of flower braces in the HTML view. Following is the Syntax for Expressions
Subscribe to:
Posts (Atom)
