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

Related Posts

  • Detect keypress in Python
    12 June

    Detect keypress in Python

    Table of ContentsUsing the keyboard module to detect keypress in PythonUsing the pynput module to detect keypress in PythonUsing the msvcrt module to detect keypress in Python Python allows us to work with user input in its programs. We can also work with hardware devices in Python. In this article, we will discuss how to […]

  • Write a list to a file in Python
    12 June

    Write a list to a file in python

    Table of ContentsUsing the write() function to write a list to a file in PythonUsing the writelines() function to write a list to a file in PythonUsing the pickle.dump() function to write a list to a file in PythonUsing the json.dump() function to write a list to a file in PythonUsing the unpack operator * […]

  • Copy a dictionary in Python
    12 June

    7 ways to copy a dictionary in python

    Table of ContentsUsing the copy() function to copy a dictionary in PythonUsing the deepcopy() function to copy a dictionary in PythonUsing the dict() function to copy a dictionary in PythonUsing the unpack operator ** to copy a dictionary in PythonUsing the update() function to copy a dictionary in PythonUsing the dictionary comprehension method to copy […]

  • Escape quotes in Python
    11 June

    Escape quotes in Python

    Table of ContentsUsing \ to escape quotes in PythonUsing \ with replace() to escape quotes in PythonUsing json.dumps to escape quotes in PythonUsing triple single or double quotes to escape quotes in pythonUse r to include \ and quotes in String 💡 Outline You can use \ to escape quotes in Python. If you want […]

  • Merge two vectors in C++
    11 June

    Merge two Vectors in C++

    Table of ContentsUsing merge() to merge two vectors in C++Using set_union() to merge two vectors in C++Using insert() to combine two vectors in C++Using move() & back_inserter to merge two vectors in C++Using copy() and back_inserter to concatenate two vectors in C++Using make_move_iterator() and insert() to merge two vectors in C++Conclusion vectors are like dynamic […]

  • C++ random number between 0 and 1
    11 June

    C++ random number between 0 and 1

    Table of ContentsUsing the rand() function to generate random number between 0 and 1 in C++Using the std::uniform_real_distribution() function to generate random number between 0 and 1 in C++ Random numbers are frequently used in programming for test case generation, cryptography, and other related purposes. In this tutorial, we will generate random number between 0 […]

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to our newletter

Get quality tutorials to your inbox. Subscribe now.