css - 将详细信息插入表单时,值未发送到表
问题描述
我的代码有问题,因为我的代码的某些部分无法正常工作。HTML 和 CSS 两个部分都可以正常工作,只是 AngularJS 不行。将值插入上述表格时,我需要将员工详细信息发送到下表。请解决我的问题。
您可以在下面找到我的 HTML、CSS 和 AngularJS 代码。
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>
<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>
解决方案
Angular 使用 camelCase + 插值。因此,ng-thing
实际上它不是ngThing
,而且您还必须在它们周围加上括号和方括号。所以,这将是
[(ngModel)]="blahblah"
[(ngRepeat)]="blahblah"
[(ngClick)]="blahblah"
ETC
另外,你有<!DOCTYPE>
两次。这也可能会给您带来问题。
推荐阅读
- python - 具有 classmethod 的本地类不起作用,但导入的版本有效
- python - 如何沿numpy数组的给定轴索引最大值的每次出现?
- testing - 当我手动创建实体但不是在开玩笑测试中时,Nestjs 管道可以工作
- vue.js - 在子组件中查看属性不起作用
- java - 如何设置 org.apache.tomcat.websocket.BLOCKING_SEND_TIMEOUT?
- javascript - 在 GAS 中重新运行的函数
- sqlite - 数据库中的最大数量
- html - 将表分成 2 但未对齐
- javascript - 如何获得 jQuery 验证以检查具有公共前缀的所有字段?
- python-3.x - 添加两个数字在 Jupyter 中有效,但在 LeetCode 中生成错误答案