<!DOCTYPE html>
<
html
ng-app
=
"myApp"
>
<
head
>
<
script
src
=
</
script
>
<
style
>
.active {
background-color: #ffcc00;
color: #333;
}
.hidden {
display: none;
}
.fade-in {
animation: fadeIn 0.5s;
}
.item-details {
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
background-color: #f7f7f7;
}
.edit-button,
.delete-button {
background-color: #007BFF;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
margin-top: 10px;
}
h1 {
color: green;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</
style
>
</
head
>
<
body
ng-controller
=
"MyController"
>
<
div
class
=
"container"
>
<
h1
>GeeksforGeeks</
h1
>
<
h3
>
Approach 1: Using ng-class and ng-click
</
h3
>
<
ul
>
<
li
ng-repeat
=
"item in items"
ng-class
=
"{ 'active': $index === selectedIndex }"
>
<
a
ng-click
=
"toggleDiv($index)"
>
{{ item.name }}
</
a
>
</
li
>
</
ul
>
<
div
ng-repeat
=
"item in items"
ng-show
=
"$index === selectedIndex"
ng-class=
"{ 'hidden': selectedIndex === -1,
'fade-in': selectedIndex !== -1 }">
<
p
>{{ item.description }}</
p
>
<
button
class
=
"edit-button"
ng-click
=
"editItem(item)"
>
Edit
</
button
>
<
button
class
=
"delete-button"
ng-click
=
"deleteItem($index)"
>
Delete
</
button
>
</
div
>
<
div
>
<
h2
>Add New Item</
h2
>
<
input
type
=
"text"
ng-model
=
"newItemName"
placeholder
=
"Item Name"
/>
<
input
type
=
"text"
ng-model
=
"newItemDescription"
placeholder
=
"Item Description"
/>
<
button
ng-click
=
"addItem()"
>
Add Item
</
button
>
</
div
>
</
div
>
<
script
>
var app = angular.module("myApp", []);
app.controller("MyController", function ($scope) {
$scope.items = [
{ name: "GeeksforGeeks Article 1",
description: "Learn about AngularJS" },
{ name: "GeeksforGeeks Article 2",
description: "Explore JavaScript" },
{ name: "GeeksforGeeks Article 3",
description: "Master Web Development" },
];
$scope.selectedIndex = -1;
$scope.newItemName = "";
$scope.newItemDescription = "";
$scope.toggleDiv = function (index) {
if ($scope.selectedIndex === index) {
$scope.selectedIndex = -1;
} else {
$scope.selectedIndex = index;
}
};
$scope.editItem = function (item) {
alert("Editing item: " + item.name);
};
$scope.deleteItem = function (index) {
if (confirm(
"Are you sure you want to delete this item?")) {
$scope.items.splice(index, 1);
$scope.selectedIndex = -1;
}
};
$scope.addItem = function () {
if ($scope.newItemName && $scope.newItemDescription) {
$scope.items.push({
name: $scope.newItemName,
description: $scope.newItemDescription,
});
$scope.newItemName = "";
$scope.newItemDescription = "";
}
};
});
</
script
>
</
body
>
</
html
>