您的位置：首页 > 其它

用户信息表（查询数据、修改密码、添加数据）

2017-10-21 14:04 686 查看

效果：列表的数据

--------------------------------------------------------------------------------------------

添加用户的效果：

--------------------------------------------------------------------------------------------

修改用户表：

--------------------------------------------------------------------------------------------

先把依赖导进去：

<script type="text/javascript" src="jquery.1.12.4.js"></script>
<script type="text/javascript" src="angular-1.3.0.js"></script>

--------------------------------------------------------------------------------------------

代码：

<!DOCTYPE html>
<html ng-app="UsersApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script type="text/javascript" src="jquery.1.12.4.js"></script>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title>用户</title>
<script type="text/javascript">
var app = angular.module("UsersApp", []);

app.controller("UsersCtrl", function ($scope) {
$scope.data = [
{
id: 1,
name: "aa",
password: "aa",
age: 10,
sex: "男"
},
{
id: 2,
name: "bb",
password: "bb",
age: 20,
sex: "男"
},
{
id: 3,
name: "cc",
password: "cc",
age: 30,
sex: "男"
},
{
id: 4,
name: "dd",
password: "dd",
age: 40,
sex: "男"
}
];
var id = 1;

$scope.add = function () {
$scope.data.push({
id: id++,
name: $scope.name,
password: $scope.password,
age: $scope.age,
sex: $scope.sex
});

$scope.name = "";
$scope.password = "";
$scope.age = "";
$scope.sex = "";

$scope.addUserIsShow = false;
};

$scope.addUser = function () {
$scope.addUserIsShow = true;
};

$scope.editUser = function (index) {
var user = $scope.data[index];
$scope.e_name = user.name;
$scope.e_old_password = "";
$scope.e_password = "";
$scope.e_repassword = "";
$scope.editUserIsShow = true;
$scope.index = index;
};

$scope.edit = function () {
if ($scope.e_password != $scope.e_repassword) {
alert("两次密码不一致！");
return;
}

$scope.data[$scope.index].password = $scope.e_password;
$scope.addUserIsShow = false;
};

var old_data = $scope.data;
$scope.searchByName = function () {
$scope.data = [];
for (var i in old_data) {
if (old_data[i].name == $scope.s_name) {
$scope.data.push(old_data[i]);
}
}
};
});

$(function () {
$("input[name='check_all']").click(function () {
var chked = this.checked;

$("input[name='users']").each(function () {
this.checked = chked;
});
});
});
</script>
</head>
<body ng-controller="UsersCtrl">
<div>
<input type="text" ng-model="s_name" placeholder="用户名查询" ng-change="searchByName()"/>
</div>

<table border="1">
<tr>
<th>
<input type="checkbox" name="check_all"/>
</th>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="user in data">
<td>
<input type="checkbox" name="users"/>
</td>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.password }}</td>
<td>{{ user.age }}</td>
<td>{{ user.sex }}</td>
<td>
<button ng-click="editUser($index)">修改密码</button>
</td>
</tr>
</table>

<button ng-click="addUser()">添加用户</button>

<div ng-show="addUserIsShow">
<table border="1">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" ng-model="name"/>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="text" ng-model="password"/>
</td>
</tr>
<tr>
<td>
年龄：
</td>
<td>
<input type="text" ng-model="age"/>
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="text" ng-model="sex"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button ng-click="add()">提交</button>
</td>
</tr>
</table>
</div>

<div ng-show="editUserIsShow">
<table border="1">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" ng-model="e_name" disabled/>
</td>
</tr>
<tr>
<td>
旧密码：
</td>
<td>
<input type="text" ng-model="e_old_password"/>
</td>
</tr>
<tr>
<td>
新密码：
</td>
<td>
<input type="text" ng-model="e_password"/>
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input type="text" ng-model="e_repassword"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="hidden" ng-model="index"/>
<button ng-click="edit()">提交</button>
</td>
</tr>
</table>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

用户信息表（查询数据 、 修改密码 、 添加数据）

用户信息表（查询数据、修改密码、添加数据）