<html ng-app="eLearningApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="CourseController">
<h1>Welcome to eLearning System</h1>
<div ng-repeat="course in courses">
<h2>{{ course.title }}</h2>
<p>{{ course.description }}</p>
<button ng-click="enroll(course)">Enroll</button>
</div>
<div ng-show="enrolledCourses.length > 0">
<h2>Enrolled Courses</h2>
<ul>
<li ng-repeat="course in enrolledCourses">{{ course.title }}</li>
</ul>
</div>
<script>
var app = angular.module('eLearningApp', []);
app.controller('CourseController', function ($scope) {
$scope.courses = [
{ title: 'Introduction to Programming', description: 'Learn the basics of programming.' },
{ title: 'Web Development Fundamentals', description: 'Explore web development concepts.' },
{ title: 'Data Science Essentials', description: 'Discover data analysis and visualization.' }
];
$scope.enrolledCourses = [];
$scope.enroll = function (course) {
if (!$scope.enrolledCourses.includes(course)) {
$scope.enrolledCourses.push(course);
}
};
});
</script>
</body>
</html>
No comments:
Post a Comment