<html ng-app="studentApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="StudentController" ng-init="initialize()">
<h1>Student Details</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in students">
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>{{ student.grade }}</td>
</tr>
</tbody>
</table>
<script>
var app = angular.module('studentApp', []);
app.controller('StudentController', function ($scope) {
$scope.students = [];
$scope.initialize = function () {
// Populate the students array with 10 student details
for (var i = 1; i <= 10; i++) {
$scope.students.push({
id: i,
name: 'Student ' + i,
age: Math.floor(Math.random() * 10) + 15, // Random age between 15 and 24
grade: 'Grade ' + (Math.floor(Math.random() * 4) + 9) // Random grade between 9 and 12
});
}
};
});
</script>
</body>
</html>
AngularJS Slip no 3 Solution
Subscribe to:
Posts (Atom)
-
The Purpose of Our Blog: Guiding Your Academic Success Welcome to our dedicated blog, tailored for student...
No comments:
Post a Comment