AngularJS ng-repeat Directive with Example

Here we will learn ng-repeat directive in angularjs with the example, use of ng-repeat directive in angularjs and how to use the ng-repeat directive in angularjs with example.

AngulartJS ng-repeat Directive

The ng-repeat directive in angularjs is used to loop through items in collection element and it will act as for loop. We will see the syntax to use ng-repeat directive in angularjs application.

Syntax of ng-repeat Directive in AngularJS

Following is the syntax of using ng-repeat directive in angularjs applications.

 

<div ng-app="" ng-init="employees=['Suresh','Rohini','Saineshwar']">

<ul>

<li ng-repeat="name in employees">

{{ name }}

</li>

</ul>

</div>

We will see how to use ng-repeat directive in angularjs with complete example

Example of AngularJS ng-repeat Directive

Following is the example of using ng-repeat directive in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs ng-repeat Directive Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>

<body ng-app="">

<div ng-init="employees=['Suresh','Rohini','Praveen','Sateesh']">

<p>Employee Details:</p>

<ul>

<li ng-repeat="name in employees">

{{ name }}

</li>

</ul>

</div>

</body>

</html>

If you observe the above code, the ng-repeat will loop through employees object and will display all the records in list format. Now we will run and see output of above code

Output of AngularJS ng-repeat Directive

Following is the result of using ng-repeat directive in angularjs applications.

 

Employee Details:

  • Suresh
  • Rohini
  • Praveen
  • Sateesh

This is how we can use ng-repeat directive in angularjs applications to loop thorugh items in collection objects.