Angularjs ng-repeat example

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

Was this post helpful?

Related Posts

  • 25 June

    Convert Roman Number to Integer in Python

    Table of ContentsHow to Convert Roman Number to Integer in PythonHow to convert roman number to integer in python?Using the if...else statement to convert roman number to integer in Python.Using classes and a dictionary to convert roman number to integer in Python.Using the roman module to convert roman number to integer in Python.ConclusionWas this post […]

  • 11 June

    Remove Single Quotes from String in Python

    Table of ContentsRemove single quotes from string in Python.How to remove single quotes from string in Python?Using the replace() function to remove single quotes from string in Python.Using a for loop to remove single quotes from string in Python.Using the join() function to remove single quotes from string in Python.Using the re module functions to […]

  • 11 June

    Escape Backslash Character in Python

    Table of ContentsEscape backslash character in python.How to use escape backslash character in python?Using the escape backslash character in python to represent whitespace characters.Using the escape backslash character in python to turn special characters into ordinary characters.Using the escape backslash character in f-strings in Python.Using the escape backslash character in raw strings in Python.Was this […]

  • 11 June

    Remove Parentheses From String in Java

    Table of ContentsJava StringsRemove Parentheses From a String Using the replaceAll() MethodRemove Parentheses From a String by TraversingConclusionWas this post helpful? Java uses the Strings data structure to store the text data. This article discusses methods to remove parentheses from a String in Java. Java Strings Java Strings is a class that stores the text […]

  • 11 June

    Break out of function in Python

    Table of ContentsBreak out of function in PythonHow to break out of function in Python?Using the return statement to break out of function in PythonUsing the try and except block to break out of function in PythonUsing the sys.exit() function to break out of function in PythonConclusionWas this post helpful? In this post, we will […]

  • 11 June

    Check if Object Is Iterable in Python

    Table of ContentsWhat are iterables in Python?How to check if object is iterable in Python?Using the iter() function to check if object is iterable in PythonUsing the for loop to check if object is iterable in PythonUsing the isinstance() function to check if object is iterable in PythonConclusionWas this post helpful? In this post, we […]

Leave a Reply

Your email address will not be published.

Subscribe to our newletter

Get quality tutorials to your inbox. Subscribe now.