Programming Examples
Demonstrate how to use the ng-repeat directive to loop through an array of objects and display their properties in an HTML table.
Demonstrate how to use the ng-repeat directive to loop through an array of objects and display their properties in an HTML table.
Solution<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>ng-repeat Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<h2>Student Details</h2>
<table border="1" cellpadding="5">
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Percentage</th>
</tr>
<tr ng-repeat="student in students">
<td>{{student.rollNo}}</td>
<td>{{student.name}}</td>
<td>{{student.percentage}}</td>
</tr>
</table>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.students = [
{rollNo: 101, name: "Alice", percentage: 85},
{rollNo: 102, name: "Bob", percentage: 72},
{rollNo: 103, name: "Charlie", percentage: 90},
{rollNo: 104, name: "David", percentage: 65}
];
});
</script>
</body>
</html>
Output/ Explanation: