Angular-JS ng-repeat Directive - GeeksforGeeks

09 Aug, 2019
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
Create an app.js file for the app.var app = angular.module('myApp',[]);  app.controller('MainCtrl', function($scope){    $scope.names = ['Adam','Steve','George','James','Armin'];    console.log($scope.names);});Line 1- Created an app module named “myApp” with no dependencies.Line 3- Main controller for our application.Line 4- Array of strings “names”.Create index.html page<!DOCTYPE html><html ng-app="myApp"><head>     <title>Angular ng-repeat</title>     <script> type="text/javascript" src="jquery-3.2.1.min.js">                                                      </script>     <script> type="text/javascript" src="angular.js"></script>     <script> type="text/javascript" src="app.js"></script></head><body ng-controller="MainCtrl">     <h2>Here is the name list</h2>     <ul>        <li ng-repeat="name in names">            {{name}}        </li>     </ul></body></html> Line 5- Include all the dependencies like jquery, angular-js and app.js fileLine 12- Use ng-repeat directive to get one name from names array at a time and display it.Output :
Create an app.js file for the app.var app = angular.module('myApp',[]);  app.controller('MainCtrl', function($scope){    $scope.names = ['Adam','Steve','George','James','Armin'];    console.log($scope.names);});Line 1- Created an app module named “myApp” with no dependencies.Line 3- Main controller for our application.Line 4- Array of strings “names”.
var app = angular.module('myApp',[]);  app.controller('MainCtrl', function($scope){    $scope.names = ['Adam','Steve','George','James','Armin'];    console.log($scope.names);});
Line 1- Created an app module named “myApp” with no dependencies.Line 3- Main controller for our application.Line 4- Array of strings “names”.
Create index.html page<!DOCTYPE html><html ng-app="myApp"><head>     <title>Angular ng-repeat</title>     <script> type="text/javascript" src="jquery-3.2.1.min.js">                                                      </script>     <script> type="text/javascript" src="angular.js"></script>     <script> type="text/javascript" src="app.js"></script></head><body ng-controller="MainCtrl">     <h2>Here is the name list</h2>     <ul>        <li ng-repeat="name in names">            {{name}}        </li>     </ul></body></html> Line 5- Include all the dependencies like jquery, angular-js and app.js fileLine 12- Use ng-repeat directive to get one name from names array at a time and display it.
<!DOCTYPE html><html ng-app="myApp"><head>     <title>Angular ng-repeat</title>     <script> type="text/javascript" src="jquery-3.2.1.min.js">                                                      </script>     <script> type="text/javascript" src="angular.js"></script>     <script> type="text/javascript" src="app.js"></script></head><body ng-controller="MainCtrl">     <h2>Here is the name list</h2>     <ul>        <li ng-repeat="name in names">            {{name}}        </li>     </ul></body></html> 
Line 5- Include all the dependencies like jquery, angular-js and app.js fileLine 12- Use ng-repeat directive to get one name from names array at a time and display it.
Output :
Example 2app.js filevar app = angular.module('myApp',[]);  app.controller('MainCtrl', function($scope){    $scope.strings= ['Geeks','For','Geeks'];    console.log($scope.strings);});We have a list of three strings.index.html<!DOCTYPE html><html ng-app="myApp"><head>     <title>Angular ng-repeat</title>     <script> type="text/javascript" src="jquery-3.2.1.min.js">                                                      </script>     <script> type="text/javascript" src="angular.js"></script>     <script> type="text/javascript" src="app.js"></script></head><body ng-controller="MainCtrl">     <h2>Here is the string list</h2>     <ul>        <li ng-repeat="s in strings>            {{name}}        </li>     </ul></body></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 valueOutput :Applications:ng-repeat can be used to iterate through an array which requires less lines of code than the usual javascript method.Filters can be used with ng-repeat to create an easy to implement search bar.Referenceshttps://angularjs.org/https://docs.angularjs.org/api/ng/directive/ngRepeathttps://docs.angularjs.org/error/ngRepeat/dupesMy Personal Notes
arrow_drop_upSave
app.js filevar app = angular.module('myApp',[]);  app.controller('MainCtrl', function($scope){    $scope.strings= ['Geeks','For','Geeks'];    console.log($scope.strings);});
var app = angular.module('myApp',[]);  app.controller('MainCtrl', function($scope){    $scope.strings= ['Geeks','For','Geeks'];    console.log($scope.strings);});
We have a list of three strings.index.html<!DOCTYPE html><html ng-app="myApp"><head>     <title>Angular ng-repeat</title>     <script> type="text/javascript" src="jquery-3.2.1.min.js">                                                      </script>     <script> type="text/javascript" src="angular.js"></script>     <script> type="text/javascript" src="app.js"></script></head><body ng-controller="MainCtrl">     <h2>Here is the string list</h2>     <ul>        <li ng-repeat="s in strings>            {{name}}        </li>     </ul></body></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
index.html
<!DOCTYPE html><html ng-app="myApp"><head>     <title>Angular ng-repeat</title>     <script> type="text/javascript" src="jquery-3.2.1.min.js">                                                      </script>     <script> type="text/javascript" src="angular.js"></script>     <script> type="text/javascript" src="app.js"></script></head><body ng-controller="MainCtrl">     <h2>Here is the string list</h2>     <ul>        <li ng-repeat="s in strings>            {{name}}        </li>     </ul></body></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
Output :Applications:ng-repeat can be used to iterate through an array which requires less lines of code than the usual javascript method.Filters can be used with ng-repeat to create an easy to implement search bar.Referenceshttps://angularjs.org/https://docs.angularjs.org/api/ng/directive/ngRepeathttps://docs.angularjs.org/error/ngRepeat/dupesMy Personal Notes
arrow_drop_upSave
Applications:
ng-repeat can be used to iterate through an array which requires less lines of code than the usual javascript method.Filters can be used with ng-repeat to create an easy to implement search bar.
ng-repeat can be used to iterate through an array which requires less lines of code than the usual javascript method.
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
mayank5326
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Express.js express.Router() Function
Top 10 Angular Libraries For Web Developers
Convert a string to an integer in JavaScript
How to Insert Form Data into Database using PHP ?
Client-Server Model
Set the value of an input field in JavaScript
Differences between Functional Components and Class Components in React
How to fetch data from an API in ReactJS ?
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
How do Web Servers work?