How to fetch the details using ng-repeat in AngularJS ? Last Updated : 05 Sep, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </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: Comment More infoAdvertise with us Next Article How to fetch the details using ng-repeat in AngularJS ? R rajatrathi Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives AngularJS-Questions Similar Reads How to print an array in table format using angularJS? Given an array & the task is to print the given array in the tabular format using AngularJS. In JavaScript, data can be stored in the form of arrays. Each of the array items has unique indexing, starting from 0. But what if the developer wants to display all the items that are in the array, on t 4 min read How to display length of filtered ng-repeat data in AngularJS ? The task is to Display the length of filtered ng-repeat data. Here we are going to use alias expression to solve this problem. Approach: To display the length of filtered ng-repeat data we use an alias expression. We create an alias for the variable used to filter the ng-repeat data and display the 2 min read How to Delete a Row from Table using AngularJS ? Given a HTML table and the task is to remove/delete the row from the table with the help of AngularJS.Approach: The approach is to delete the row from the array where it stored and served to the table data. When the user clicks on the button near to the table row, it passes the index of that table a 2 min read How to get the value of radio button using AngularJS ? In this article, we will see how to get the value of the radio button using AngularJS, along with understanding the basic implementation through illustrations. The value of the checked radio button can be fetched with the help of the ng-model directive that helps to bind the data with the specific e 2 min read How to filter ng-repeat values according to ng-model using AngularJS ? In this article, we will see how to filter the value of the ng-repeat directive according to the ng-model directive using AngularJS. The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model 2 min read Like