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.
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:
Please Login to comment...