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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    var app = angular.module('myApp',[]);
      
    app.controller('MainCtrl', function($scope){
        $scope.names = ['Adam','Steve','George','James','Armin'];
        console.log($scope.names);
    });

    chevron_right

    
    

    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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  2. We have a list of three strings.

    index.html

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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



    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



    Improved By : mayank5326



    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.