I'm experiencing issues with my code as some parts are not functioning correctly. While the HTML and CSS sections are working fine, the problem lies in the AngularJS part. When I input data into the form above, I need the employee details to be sent to the table below. Can you help me resolve this issue?
Below are the snippets of my HTML, CSS, and AngularJS code.
var app = angular.module("myapp", []);
app.controller("CRUDoperation", function ($scope) {
$scope.Emplist = [];
$scope.AddData = function () {
var emp = {
Id: $scope.Emplist.length + 1,
Name: $scope.Name,
Salary: $scope.Salary
};
$scope.Emplist.push(emp);
ClearModel();
};
});
function ClearModel() {
$scope.Id = 0;
$scope.Name = '';
$scope.Salary = 0;
};
$scope.DeleteData = function (emp) {
var index = $scope.Emplist.indexOf(emp);
$scope.Emplist.splice(index, 1);
};
$scope.BindSelectedData = function (emp) {
$scope.Id = emp.Id;
$scope.Name = emp.Name;
$scope.Salary = emp.Salary;
};
$scope.UpdateData = function () {
$.grep($scope.Emplist, function (e) {
if (e.Id == $scope.Id) {
e.Name = $scope.Name;
e.Salary = $scope.Salary;
}
})
};
body {
background-image: url("back.jpg");
}
h1 {
text-align: center;
color: Crimson;
}
#save {
position: absolute;
left: 400px;
top: 240px;
width: 150px;
height: 40px;
color: white;
background-color: pink;
font-size: 18px;
}
#save:hover {
color: black;
background-color: Magenta;
cursor: pointer;
}
#update:hover {
color: black;
background-color: SaddleBrown;
cursor: pointer;
}
#update {
position: absolute;
left: 230px;
top: 240px;
width: 150px;
height: 40px;
color: white;
background-color: Peru;
font-size: 18px;
}
#del {
width: 110px;
height: 35px;
color: white;
background-color: SeaGreen;
font-size: 18px;
}
#del:hover {
color: black;
background-color: OrangeRed;
cursor: pointer;
}
#table1 {
position: absolute;
top: 300px;
left: 0px;
background-color: gray;
}
#table1:hover {
cursor: copy;
}
input[type=text] {
position: absolute;
top: 130px;
left: 150px;
width: 400px;
height: 35px;
}
input[type=number] {
position: absolute;
top: 180px;
left: 150px;
width: 400px;
height: 35px;
}
#hidden {
position: absolute;
top: 80px;
left: 150px;
width: 400px;
height: 35px;
background-color: gray:
}
#hidden:hover {
cursor: not-allowed;
}
span {
position: absolute;
top: 90px;
font-size: 25px;
}
span1 {
position: absolute;
top: 135px;
font-size: 25px;
}
span2 {
position: absolute;
top: 185px;
font-size: 25px;
}
<!DOCTYPE html>
<<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Angular Web App</title>
</head>
<body>
<h1>Employee Details</h1>
<div ng-app="myapp" ng-controller="CRUDoperation"></div>
<div class id="center">
<table>
<tr>
<td><span>ID</span></td>
<td><input type="text" id="hidden" disabled="disabled" placeholder="Auto Filled" ng-model="Id"></td>
</tr>
<tr>
<td>
<span1>Name</span1>
</td>
<td><input type="text" placeholder="Enter Employee Name here" ng-model="Name"></td>
</tr>
<tr>
<td>
<span2>Salary</span2>
</td>
<td><input type="number" placeholder="Enter Salary Amount here" ng-model="Salary"></td>
</tr>
<tr>
<td><input type="button" id=save ng-click="AddData()" value="Save Data"> </td>
</tr>
<tr>
<td><input type="button" id=update ng-click="UpdateData()" value="Update Data"> </td>
</tr>
</table>
<table border="2" id="table1" style="width:550px;">
<thead>
<th>ID</th>
<th>Name</th>
<th>Salary</th>
</thead>
<tr ng-click="BindSelectedData(Emp)" ng-repeat="Emp in Emplist">
<td>{{emp.Id}}</td>
<td>{{emp.Name}}</td>
<td>{{emp.Salary}}</td>
<td><input type="button" ng-click="DeleteData(Emp)" id=del value="Delete"></td>
</tr>
</table>
</body>
</html>