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.
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.
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
Following is the example of using ng-repeat
directive in angularjs applications.
<!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
Following is the result of using ng-repeat directive in angularjs applications.
Employee Details:
This is how we can use ng-repeat directive in angularjs applications to loop thorugh items in collection objects.