How to fetch the details using ng-repeat in AngularJS ?
Last Updated :
05 Sep, 2022
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...