डाउनलोड पी.डी.एफ. ई-बुक्स
AJS - Directives ng-repeat

ng-repeat directive; ये collection से दिए multiple items को repeat करने के लिए इस्तेमाल किया जाता है |

collections ये Array या Objects हो सकते है |

दिए हुए collection से सिर्फ एक ही item को repeat किया जाता है |


Syntax for ng-repeat Directive in AngularJS

<element ng-repeat="expression">
</element>

ng-repeat Attribute's Parameters in AngularJS

expression : यहाँ पर expression दिया जाता है |


Example for ng-repeat Directive using Array in AngularJS

Source Code :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="arr = ['Ramesh', 'Rakesh', 'Mangesh']">

Array : {{arr}} <br /><br />

arr[0] : {{arr[0]}}<br />
arr[1] : {{arr[1]}}<br /><br />

<div ng-repeat="a in arr" >
{{a}}<br />
</div>

</div>

</body>
</html>
Output :
Array : ["Ramesh","Rakesh","Mangesh"]

arr[0] : Ramesh
arr[1] : Rakesh

Ramesh
Rakesh
Mangesh


Example for ng-repeat Directive using Object in AngularJS

Source Code :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="obj = [{'name':'Ramesh'}, {'name':'Rakesh'}, {'name':'Mangesh'}]">

<div ng-repeat="o in obj" >
{{o.name}}<br />
</div>

</div>

</body>
</html>
Output :
Ramesh
Rakesh
Mangesh

Another Example for ng-repeat Directive using Object in AngularJS

Source Code :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="obj = {'name1':'Ramesh', 'name2':'Rakesh', 'name3':'Mangesh'}">

<div ng-repeat="(key, value) in obj">
{{key}} : {{value}}<br />
</div>

</div>

</body>
</html>
Output :
name1 : Ramesh
name2 : Rakesh
name3 : Mangesh