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

  • Multiline comment in PowerShell
    05 January

    PowerShell – Multiline Comment

    Table of ContentsUsing <# #> TagsUsing Shortcut Keys Using <# #> Tags Use the <# tag at the beginning of comments and the #> tag at the end of comments to create multiline comments in PowerShell scripts. All lines inside the comment block are part of the comments. [crayon-63b70b3a8e3da771075846/] In programming, we use a comment […]

  • Call PowerShell Script from another Script
    05 January

    Call PowerShell Script from Another Script

    Table of ContentsUsing . OperatorUsing & OperatorUsing Invoke-Expression CmdletUsing Start-Process Cmdlet Using . Operator To call a PowerShell script from another: Create two scripts, Script1.ps1 and Script2.ps1. Use the . operator to call Script2.ps1 from Script1.ps1. [crayon-63b70b3a8eac4978066907/] [crayon-63b70b3a8eaca676478769/] [crayon-63b70b3a8eacb760666554/] [crayon-63b70b3a8eacc703890608/] Both scripts (Script1.ps1 and Script2.ps1) were located in the E:\Test directory. When we ran Script1.ps1, […]

  • awk print $2
    05 January

    awk print $2

    In this tutorial, we will see about what is meant by awk print $2. awk is interpreted programming language. It is very powerful programming language and used for text processing. Awk stands for the names of its authors “Aho, Weinberger, and Kernighan”. awk print $2 As said before, awk can be used for text processing. […]

  • Check if Service is running in PowerShell
    05 January

    Check if Service is Running in PowerShell

    Table of ContentsUsing Get-Service CmdletUse Get-Service Cmdlet with if-else BlockUsing Get-SPServiceApplication Cmdlet Using Get-Service Cmdlet Use Get-Service with the Where-Object cmdlet to check if a particular service is running on our local machine. [crayon-63b70b3a8f25e965529473/] [crayon-63b70b3a8f263903807431/] If you need to put if condition, then head over to this section . We used the Get-Service cmdlet to […]

  • Run reg file in PowerShell
    05 January

    Run .reg File Using PowerShell

    Table of ContentsUsing Invoke-Item CmdletUsing Start-Process CmdletUsing iex OperatorUsing . OperatorUsing reg import Command Using Invoke-Item Cmdlet Use the Invoke-Item cmdlet to run the .reg file using PowerShell. [crayon-63b70b3a8f881659041156/] For the above command, Invoke-Item performed its default action, which means it allowed us to execute a .reg file. We can also use it to run […]

  • PowerShell restart Computer
    05 January

    PowerShell – Restart Computer

    Table of ContentsUsing Restart-Computer cmdletUse Restart-Computer cmdlet for Local ComputersUse Restart-Computer cmdlet for Remote ComputerUsing Shutdown CommandUse Shutdown Command for Local ComputersUse Shutdown Command for Remote ComputersExamplesExample 1: Restart local computerExample 2: Restart multiple computersExample 3: Restart remote computer with wait, timeout, delay and for parameters. Using Restart-Computer cmdlet Use the Restart-Computer cmdlet to restart […]

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.