Open In App

Angular-JS ng-repeat Directive

Improve
Improve
Like Article
Like
Save
Share
Report

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.




    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

  1. app.js file




    var app = angular.module('myApp',[]);
      
    app.controller('MainCtrl', function($scope){
        $scope.strings= ['Geeks','For','Geeks'];
        console.log($scope.strings);
    });

    
    

  2. 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

  3. Output :

  4. 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



    Last Updated : 09 Aug, 2019
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads