运行效果如下(利用了AngularJS的双向绑定进行修改):
源码如下:
@{
ViewBag.Title = "Index";
}
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
myApp.controller('mtController', function ($scope) {
$scope.datas = [
{
id:1,
name: "张三",
age: 23,
account: "1101",
pass: "123",
sex: "男"
}, {
id:2,
name: "李四",
age: 22,
account: "1102",
pass: "123",
sex: "男"
}, {
id:3,
name: "张三",
age: 24,
account: "1103",
pass: "123",
sex: "男"
}
];
//增加数据的方法
$scope.addUser = function () {
var flag1 = false;
//校验用户名
if ($scope.userName == "" || $scope.userName == null) {
flag1 = false;
alert("userName不能为空")
return;
} else {
flag1 = true;
}
//校验用户年龄
if ($scope.userAge == "" || $scope.userAge == null) {
flag1 = false;
alert("userAge不能为空")
return;
} else if (isNaN($scope.userAge)) { //如果传入的参数是非数字返回true,如果是数字返回false
flag1 = false;
alert("userAge必须是数字")
return;
} else {
flag1 = true;
}
//校验用户账号
if ($scope.userAccount == "" || $scope.userAccount == null) {
flag1 = false;
alert("userAccount不能为空")
return;
} else {
flag1 = true;
}
//校验用户密码
if ($scope.userPass == "" || $scope.userPass == null) {
flag1 = false;
alert("userPass不能为空")
return;
} else {
flag1 = true;
}
//校验性别
let sex = document.getElementsByName("sex");
var flags = false;
for (var i = 0; i < sex.length; i++) {
if (sex[i].checked == true) {
if (i == 0) {
$scope.sexName = "男";
}
if (i == 1) {
$scope.sexName = "女";
}
flags = true;
}
}
if (flags == false) {
flag1 = false;
alert("userSex不能为空")
return;
} else {
flag1 = true;
}
//如果条件都满足,即flag1为true,就添加数据到原始的集合里面
if (flag1) {
$scope.datas.push({
id:$scope.datas.length+1,
name: $scope.userName,
age: $scope.userAge,
account: $scope.userAccount,
pass: $scope.userPass,
sex:$scope.sexName
});
}
}
//点击更新按钮将表单显示
var updateIndex = 0;
$scope.showUpadateForm = function (index) {
updateIndex = index;
$scope.updateForm = true;
for (var i = 0; i < $scope.datas.length; i++) {
if ($scope.datas[i].id == index + 1) {
//alert(index)
$scope.updateUser = $scope.datas[i];
break;
}
}
}
//取消修改,关闭修改表单的显示cancelUpdateUser
$scope.cancelUpdateUser = function () {
$scope.updateForm = false;
}
//删除用户
$scope.deleteUser = function (index) {
$scope.datas.splice(index, 1);
}
});
</script>
<h1>AngularJS增删改操作</h1>
<div ng-app="myApp" ng-controller="mtController">
<table border="2px" cellspacing="0">
<tr>
<td>序号</td>
<td>用户名</td>
<td>用户年龄</td>
<td>用户账号</td>
<td>用户密码</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in datas">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.account}}</td>
<td>{{x.pass}}</td>
<td>{{x.sex}}</td>
<td>
<button ng-click="showUpadateForm($index)">修改</button>
<button ng-click="deleteUser($index)">删除</button>
</td>
</tr>
</table>
<form style="border: 1px solid yellow; width: 260px;">
用户名<input type="text" placeholder="请输入用户名" ng-model="userName"/>
<br />
用户年龄<input type="text" ng-model="userAge"/>
<br />
用户账号<input type="text" ng-model="userAccount"/>
<br />
用户密码<input type="text" ng-model="userPass"/>
<br />
性别@*<input type="text" ng-model="userSex"/>*@
<input type="radio" name="sex" value="male" id="sex1" />男
<input type="radio" name="sex" value="female" id="sex2" />女<br />
@*<button ng-click="addUser()">添加</button>*@
<input type="button" value="添加" ng-click="addUser()"/>
<input type="reset" value="重置" />
</form>
@*ng-show 指令在表达式为 true 时显示指定的 HTML 元素,否则隐藏指定的 HTML 元素*@
<form style="border: 1px solid yellow; width: 260px;" ng-show="updateForm">
用户名<input type="text" placeholder="请输入用户名" ng-model="updateUser.name" /><!--updateUserName-->
<br />
用户年龄<input type="text" ng-model="updateUser.age" /><!--updateUserAge-->
<br />
用户账号<input type="text" ng-model="updateUser.account" /><!--updateUserAccount-->
<br />
用户密码<input type="text" ng-model="updateUser.pass" /><!--updateUserPass-->
<br />
性别 <input type="radio" name="updateSex" value="male" id="updateSex1" />男
<input type="radio" name="updateSex" value="female" id="updateSex2" />女<br />
<input type="button" value="关闭" ng-click="cancelUpdateUser()" />
<input type="reset" value="重置" />
</form>
</div>
在点击修改按钮后弹出的表单中,关于性别的修改还可以继续优化,此处如果想要进一步完善可参照添加用户功能中的性别校验进行完善。