How to fetch the details using ng-repeat in AngularJS ?
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.
<!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.
<!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:
