Angular-JS ng-repeat Directive

Angular-JS ng-repeat directive is a handy tool to repeat a set of HTML code for a number of times or once per item in a collection of items. ng-repeat is mostly used on arrays and objects. ng-repeat is similar to a loop that we have in C, C++ or other languages but technically it instantiates a template(normally a set of HTML structures) for each element in a collection that we are accessing. Angular maintains a $index variable as a key to the element which is currently being accessed and a user can also access this variable. Syntax :

<div ng-repeat="keyName in MyObjectName ">
 {{keyName}}
</div>

Here "MyObjectName" is a collection that can be an object or an array and you can access each value inside it using a "keyName". Example 1

1. Create an app.js file for the app. Line 1- Created an app module named "myApp" with no dependencies. Line 3- Main controller for our application. Line 4- Array of strings "names".
2. Create index.html page Line 5- Include all the dependencies like jquery, angular-js and app.js file Line 12- Use ng-repeat directive to get one name from names array at a time and display it.
3. Output : 👁 Image
   

Example 2
1. app.js file
2. We have a list of three strings. index.html Note-"track by $index" is used here because there are duplicate entries in our list i.e. "Geeks". Duplicate keys are not allowed because AngularJS uses keys to associate DOM nodes with items. "track by $index", will cause the items to be keyed by their position in the array instead of their value
3. Output :

   👁 Image
   

Applications:
1. ng-repeat can be used to iterate through an array which requires less lines of code than the usual javascript method.
2. Filters can be used with ng-repeat to create an easy to implement search bar.
References
• https://angularjs.org/
• https://docs.angularjs.org/api/ng/directive/ngRepeat
• https://docs.angularjs.org/error/ngRepeat/dupes