Post
Ask Question

ng-repeat Directive in AngularJS

ng-repeat directive repeats the HTML elements. Let us see this with the help of an example.
Write the following HTML mark up in the webpage.

  1. <!doctype html>  
  2. <html ng-app>  
  3.   <head>  
  4.     <title>My Angular App</title>  
  5.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  6.   </head>  
  7.   <body>  
  8. <div ng-app="" ng-init="cities=['New Delhi','Mumbai','Pune']">  
  9.   <ul>  
  10.     <li ng-repeat="x in cities">  
  11.       {{ x }}  
  12.     </li>  
  13.   </ul>  
  14. </div>  
  15.   </body>  
  16. </html>  
In the ng-init directive we defined a collection of cities. We want to display these cities as output. To do this we have taken an unordered list. Inside that we we have taken a list item. Now define the ng-repeat directive in the li tag. It is just like a for loop. It will traverse all the elements present in the collection and display them as output.

So let us check the output of the program.

output
Let us try one more example that deals with an array of objects. Write the below code in the webpage.
  1. <!doctype html>  
  2. <html ng-app>  
  3.   <head>  
  4.     <title>My Angular App</title>  
  5.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  6.   </head>  
  7.   <body>  
  8. <div ng-app="" ng-init="data=[  
  9. {State:'Maharashtra',city:'Mumbai'},  
  10. {State:'Goa',city:'Panjim'},  
  11. {State:'Karnataka',city:'Bengaluru'}]">  
  12.   
  13. <ul>  
  14.   <li ng-repeat="x in data">  
  15.     {{ x.State + ', ' + x.city }}  
  16.   </li>  
  17. </ul>  
  18.   
  19. </div>  
  20.   </body>  
  21. </html>  
In this example we have defined states with cities. Ng-init directive has an array of these objects. We will display the State along with their cities using Angular JS. Using ng-repeat we will concatenate the state with the cities and display them in a comma separated format.

Let us check the output now.
output
This is how ng-repeat works in Angular JS.