How to fetch the details using ng-repeat in AngularJS ? Last Updated : 05 Sep, 2022 Comments Improve Suggest changes 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 How to use comma as list separator in AngularJS ? In this article, we will use commas as a list separator in AngularJS applications.In AngularJS, we can use a list separator by simply placing the command between the items in the list. If we have an array of items that we need to display in the application, then we can use ng-repeat to iterate throu 4 min read AngularJS Fetch Data From API using HttpClient There is some data in the API and our task here is to fetch data from that API using HTTP and display it. In this article, we will use a case where the API contains employee details which we will fetch. The API is a fake API in which data is stored in the form of a JSON (Key: Value) pair. API stands 4 min read How to get form input value using AngularJS ? Given a form element and the task is to get the form values input by the user with the help of AngularJS.Approach: We are storing the data in the JSON object after the user enters it in the input element with the help of the Angular.copy(object) method. After that, data from the JSON object can be a 2 min read How to get file content and other details in AngularJS? We can get the file content by using some basic angular functions and other details like the name and size of the file in AngularJS. To understand it look into the below example where both HTML and JS files are implemented. Note: Consider below two files are of same component in angular. app.module. 2 min read How to concat strings using AngularJS ? In this article, we will see how to concat strings in AngularJS. There are few ways to concat the strings in AngularJS. In this article, we will see 2 of them.Example 1: In the first example, we are using the '+' operator to concat the strings HTML<!DOCTYPE HTML> <html> <head> < 2 min read Like