AngularJS ngrepeat Directive (original) (raw)

Angular-JS ng-repeat Directive

Last Updated : 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 :

{{keyName}}

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.
    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”.
  2. 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 file
    Line 12- Use ng-repeat directive to get one name from names array at a time and display it.
  3. Output :
    Example 2
  4. app.js file
    var app = angular.module( 'myApp' ,[]);
    app.controller( 'MainCtrl' , function ($scope){
    `$scope.strings= [` `'Geeks'` `,` `'For'` `,` `'Geeks'` `]; ` console.log($scope.strings);
    });
  5. 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”isusedherebecausethereareduplicateentriesinourlisti.e.“Geeks”.DuplicatekeysarenotallowedbecauseAngularJSuseskeystoassociateDOMnodeswithitems.“trackbyindex” 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”isusedherebecausethereareduplicateentriesinourlisti.e.“Geeks”.DuplicatekeysarenotallowedbecauseAngularJSuseskeystoassociateDOMnodeswithitems.“trackbyindex”, will cause the items to be keyed by their position in the array instead of their value
  6. Output :

**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