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:

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

Sample Output for ng-repeat Directive in AngularJS:

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

PDF

AngularJS ng-repeat

Syntax for ng-repeat Directive in AngularJS:

Parameter Values:

Sample code for ng-repeat Directive in AngularJS:

Data:

HTML:

Logic:

Code Explanation for ng-repeat Directive in AngularJS:

Sample Output for ng-repeat Directive in AngularJS:

Related Searches to angularjs ng-repeat directive

Wikitechy

Join our Community

Other Languages