Skip to content
Related Articles

Related Articles

How to fetch the details using ng-repeat in AngularJS ?

Improve Article
Save Article
  • Last Updated : 05 Sep, 2022
Improve Article
Save Article

In this article, we will see how to fetch the details with the help of the ng-repeat directive in Angular, along with understanding its implementation through the illustrations. AngularJS contains various types of pre-defined Directives, where most of the directives start with ng which denotes Angular. The ng-repeat directive is used to iterate over an object for its properties. A template is instantiated once an item is from a collection. Every template has its own scope where the loop variable is set to the current collection item and the $index is set to a key or the index of the item. 

Syntax:

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

Parameter values:

  • key: It is a user-defined identifier in an expression that denotes the index of the item.
  • value: It is also a user-defined identifier that denotes the value assigned to the specific key in an expression.

Example 1: This example shows the basic usage of the ng-repeat directive to fetch the data in a tabular format.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    <title>
          Fetching the details using the ng-repeat Directive
     </title>
    <style>
        body {
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
        }
  
        table {
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
  
<body ng-app="myTable">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>
        Fetching the details using the ng-repeat Directive
    </h3>
  
    <table ng-controller="control" border="2">
        <tr ng-repeat="x in records">
            <td>{{x.Country}}</td>
            <td>{{x.Capital}}</td>
        </tr>
    </table>
  
    <script>
        var app = angular.module("myTable", []);
        app.controller("control", function ($scope) {
            $scope.records = [
                {
                    "Country": "India",
                    "Capital": "Delhi"
                },
                {
                    "Country": "America ",
                    "Capital": "Washington, D.C. "
                },
                {
                    "Country": "Germany",
                    "Capital": "Berlin"
                },
                {
                    "Country": "Japan",
                    "Capital": "Tokyo"
                }
            ]
        });
    </script>
</body>
</html>

Output:

 

Example 2: This is another example illustrating the fetching of data using the ng-repeat directive in AngularJS.

HTML




<!DOCTYPE html>
<html ng-app="myApp">
  
<head>
    <title>Angular ng-repeat</title>
    <script src=
    </script>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
        }
        h1 {
            color: green;
        }
        ul {
            display: inline-block;
            text-align: left;
        }
    </style>
</head>
  
<body ng-controller="MainCtrl">
    <h1>GeeksforGeeks</h1>
    <h3>
        Fetching the details using the ng-repeat Directive
    </h3>
    <h4>Sorting Algorithms:</h4>
    <ul>
        <li ng-repeat="name in names">
            {{name}}
        </li>
    </ul>
    <script>
        var app = angular.module('myApp', []);
        app.controller('MainCtrl', function ($scope) {
            $scope.names = ['Selection Sort', 
                            'Quick Sort', 
                            'Merge Sort', 
                            'Bubble Sort', 
                            'Insertion Sort'];
            console.log($scope.names);
        });
    </script>
</body>
</html>

Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!