Angularjs ng-repeat example

Last updated on March 21st, 2017 at 03:54 pm

Previous
Next

AngularJS tutorial:

ng-repeat is a angular js directive which is often used to display data in tables. It is widely used directive. It works very much similar to java for each loop.

Syntax:

Here countries is json array defined in app.js.

Lets understand with example .

Copy below text , open notepad , paste it and save it as angularJSExample.html and open it in the browser.

app.js

Output:

When you open html file in browser, you will get following output:

Some other properties:

There are some properties which is accessible to local scope which we can use in ng-repeat directly.

Variable
Type
Description
$index
number
It carries index of repeated element
$first

boolean

true if repeated element is first element
$middle
boolean
true if repeated element is middle element
$last
boolean
true if repeated element is last element
$even
boolean
It depends on $index.
true if $index is even
$odd
boolean
It depends on $index.
true if $index is odd

Lets change color of odd and even rows of table using $even and $odd.

app.js

Output:

When you open html file in browser, you will get following output:

Live demo:

Angular js on jsbin.com

As you can see, we have used $even to check even row and $odd to check odd row. ng-if is another angular directive which is used for checking if condition. We are going to use ng-repeat in many other examples.
Reference: 
https://docs.angularjs.org/api/ng/directive/ngRepeat

Previous
Next

Join Our News Letter - Stay Updated

Subscribe to Awesome Java Content.

Add Comment

Join Our News Letter - Stay Updated

Subscribe to Awesome Java Content.
You can like our facebook page Java2blog