AngularJS ng-repeat



  • The ng-repeat directive is used to clones a HTML element loop for each item in a collection.
  • The collection should be an object or array.
  • The ng-repeat directive especially suitable for ordered list, unordered-list or HTML table.

Syntax for ng-repeat Directive in AngularJS:

<element ng-repeat=" (key, value) in myObj ">……</element>

Parameter Values:

Value Description
(key, value) in myObj Angular relies on the order returned by the browser when running for key in myObj

Sample code for ng-repeat Directive in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body>
    <div ng-app=" myApp" ng- controller=" repeatCtrl">
        <h2>Wikitechy Tutorials list </h2>
        <ul>
            <li ng-repeat=" data in list" > {{data}} </li>
        <ul>
    </div>
    <script>
        var app = angular.module("myApp ", []);
        app.controller("repeatCtrl", function($scope) {
            $scope.list = [
                "HTML",
                "PHP",
                "CSS",
                "JAVA",
            ]
        });
        </script>
    </body>
</html>

Data:

  • Collection of data has been defined using array for our AngularJS Application.
list = [
     "HTML",
     "PHP",
     "CSS",
     "JAVA",
]

HTML:

  • Viewable HTML contents in AngularJS Application.
<div ng-app=" myApp" ng-controller=" repeatCtrl" >
    <h2>Wikitechy Tutorials list </h2>
    <ul>                    
        <li ng- repeat=" data in list" > {{data}} </li>
    </ul>
</div>

Logic:

  • Controller logic for the AngularJS application.
app.controller("repeatCtrl", function($scope) {
    $scope.list = [
        "HTML",
        "PHP",
        "CSS",
        "JAVA",
    ]
});

Code Explanation for ng-repeat Directive in AngularJS:

Code Explanation for ng-repeat Directive In AngularJS

  1. The ng-app specifies the root element (<div>) to define AngularJS application.
  2. The ng-controller is a directive to control the AngularJS Application.
  3. The ng-repeat is used to repeat the <li> tag for each data in the list.
  4. The angular.module used to create an Application module.
  5. The app.controller controls the Application module.
  6. The $scope.list is a collection of data stored as array in the $scope object.

Sample Output for ng-repeat Directive in AngularJS:

Sample Output for ng-repeat Directive In Angularjs

  1. The output displays list of tutorials by using ng-repeat Directive.


Related Searches to angularjs ng-repeat directive