angularjs-查询.删除,添加数据,修改密码
2017-10-23 08:01
579 查看
<!DOCTYPE html>
<html ng-app="UMApp">
<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 example_data = [
{
id: 1,
name: "曹操",
password: "123456",
age: 45,
sex: "男"
},
{
id: 2,
name: "张辽",
password: "123456",
age: 34,
sex: "男"
},
{
id: 3,
name: "司马懿",
password: "123456",
age: 30,
sex: "男"
},
{
id: 4,
name: "夏侯淳",
password: "123456",
age: 40,
sex: "男"
},
{
id: 5,
name: "蔡文姬",
password: "123456",
age: 18,
sex: "女"
},
{
id: 6,
name: "刘备",
password: "123456",
age: 50,
sex: "男"
},
{
id: 7,
name: "关羽",
password: "123456",
age: 45,
sex: "男"
},
{
id: 8,
name: "张飞",
password: "123456",
age: 46,
sex: "男"
},
{
id: 9,
name: "赵云",
password: "123456",
age: 35,
sex: "男"
},
{
id: 10,
name: "孙尚香",
password: "123456",
age: 28,
sex: "女"
},
{
id: 11,
name: "孙权",
password: "123456",
age: 30,
sex: "男"
},
{
id: 12,
name: "周瑜",
password: "123456",
age: 32,
sex: "男"
},
{
id: 13,
name: "鲁肃",
password: "123456",
age: 33,
sex: "男"
},
{
id: 14,
name: "黄盖",
password: "123456",
age: 55,
sex: "男"
},
{
id: 15,
name: "小乔",
password: "123456",
age: 28,
sex: "女"
},
{
id: 16,
name: "小乔",
password: "123456",
age: 26,
sex: "女"
}
];
</script>
<script type="text/javascript">
// 全选/全不选
$(function () {
$("input[name='check_all']").click(function () {
var checked = this.checked; // 获取 <input type="checkbox" name="check_all"/> 中checked属性的值
$("input[name='user_id[]']").each(function () {
this.checked = checked; // 依次设置每一个 <input type="checkbox" name="user_id[]"/> 中checked属性的值
});
});
});
var app = angular.module("UMApp", []);
app.controller("UMCtrl", function ($scope) {
// 查询的年龄区间
$scope.age_sections = [
{
txt: "10~20",
min: 10,
max: 20
},
{
txt: "20~30",
min: 20,
max: 30
},
{
txt: "30~40",
min: 30,
max: 40
},
{
txt: "40~50",
min: 40,
max: 50
},
{
txt: "50~60",
min: 50,
max: 60
},
{
txt: "60~70",
min: 60,
max: 70
},
{
txt: "70~80",
min: 70,
max: 80
}
];
$scope.data = example_data;
var id = 17;
var dataIsChange = false; // 数据是否有改变，用于查询时，判断是否需要备份数据
// 显示添加用户表单
$scope.showAddUserBox = function () {
$scope.add_user_box_is_show = true;
};
// 提交添加用户表单
$scope.addUser = function () {
if ($scope.add_user_name == undefined || $scope.add_user_name == "") {
alert("请输入用户名！");
return;
}
if ($scope.add_user_password == undefined || $scope.add_user_password == "") {
alert("请输入密码！");
return;
}
if ($scope.add_user_repassword == undefined || $scope.add_user_repassword == "") {
alert("请再次确认密码！");
return;
}
if ($scope.add_user_password != $scope.add_user_repassword) {
alert("两次密码不一致！");
return;
}
if ($scope.add_user_age == undefined || $scope.add_user_age == "") {
alert("请输入年龄！");
return;
}
if ($scope.add_user_sex == undefined || $scope.add_user_sex == "") {
alert("请输入性别！");
d363
return;
}
if (!/^\d+$/.test($scope.add_user_age)) {
alert("年龄必须整数！");
return;
}
var age = parseInt($scope.add_user_age);
if (age < 10 || age > 60) {
alert("年龄必须在10~60之间！");
return;
}
$scope.data.push({
id: id++,
name: $scope.add_user_name,
password: $scope.add_user_password,
age: $scope.add_user_age,
sex: $scope.add_user_sex
});
$scope.add_user_name = "";
$scope.add_user_password = "";
$scope.add_user_repassword = "";
$scope.add_user_age = "";
$scope.add_user_sex = "";
$scope.add_user_box_is_show = false;
};
// 显示修改密码表单
$scope.showEditPwdBox = function ($index) {
$scope.epwd_name = $scope.data[$index].name;
$scope.epwd_index = $index;
$scope.edit_pwd_box_is_show = true;
};
// 提交修改密码表单
$scope.editPwd = function () {
var user = $scope.data[$scope.epwd_index];
if ($scope.epwd_old_password == undefined || $scope.epwd_old_password == "") {
alert("请输入旧密码！");
return;
}
if ($scope.epwd_password == undefined || $scope.epwd_password == "") {
alert("请输入新密码！");
return;
}
if ($scope.epwd_repassword == undefined || $scope.epwd_repassword == "") {
alert("请再次确认密码！");
return;
}
if ($scope.epwd_old_password != user.password) {
alert("旧密码不正确！");
return;
}
if ($scope.epwd_password != $scope.epwd_repassword) {
alert("两次密码不一致！");
return;
}
$scope.data[$scope.epwd_index].password = $scope.epwd_password; // 修改密码
$scope.edit_pwd_box_is_show = false;
};
// 清空列表
$scope.removeAll = function () {
$scope.data = [];
};
// 删除选中项
$scope.removeChecked = function () {
var remove_idx_arr = []; // 待删除的所有索引
// 获取所有user_id[]并且被选择的Checkbox
$("input[name='user_id[]']:checked").each(function () {
var index = this.value; // <input type="checkbox" name="user_id[]" value="{{ $index }}"/>，value中保存了数组的索引
remove_idx_arr.push(index);
});
var data = $scope.data; // 备份当前列表
$scope.data = []; // 清空当前列表
for (var idx in data) {
// 索引不在待删除的所有索引中，添加到新列表中
if (remove_idx_arr.indexOf(idx) == -1) {
$scope.data.push(data[idx]);
}
}
};
$scope.search = function () {
var name = "";
var age = {}; // json对象，如：{ txt: "70~80", min: 70, max: 80 }
var sex = "";
if ($scope.search_name_value != undefined && $scope.search_name_value != null) {
name = $scope.search_name_value.trim();
}
// 未选中时值：undefined，选中“请选择”按钮时值：null
if ($scope.search_age_value != undefined && $scope.search_age_value != null && $scope.search_age_value != "") {
age = $scope.search_age_value; // age = json对象，如：{txt: "70~80", min: 70, max: 80 }
}
if ($scope.search_sex_value != undefined && $scope.search_sex_value != null) {
sex = $scope.search_sex_value;
}
// 没有可查询的项
if (name == "" && age == {} && sex == "") {
return;
}
console.log("需要查找的name: " + name + ", 需要查找的age区间: [" + age.min + "~" + age.max + "], 需要查找的sex: " + sex);
// 从全部数据中查找name、age、sex，找到后添加到列表中
for (var i in $scope.data) {
var item = $scope.data[i];
var index = parseInt(i) + 1; // 第一个tr是表头，所以用i + 1
// name相等，显示
if (item.name == name) {
$("tr:eq(" + index + ")").show();
continue;
}
// 性别满足，显示
if (item.sex == sex) {
$("tr:eq(" + index + ")").show();
continue;
}
if (age != {} && item.age >= age.min && item.age <= age.max) {
$("tr:eq(" + index + ")").show();
continue;
}
// 3个条件都不符合，隐藏
$("tr:eq(" + index + ")").hide();
}
};
});
</script>
</head>
<body ng-controller="UMCtrl">
<div>
<input type="text" ng-model="search_name_value" ng-change="search()" placeholder="用户名查询"/>
年龄：
<select ng-model="search_age_value" ng-options="section.txt for section in age_sections"
ng-change="search()">
<option value="">请选择</option>
</select>
性别：
<select ng-model="search_sex_value" ng-change="search()">
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<button ng-click="removeAll()">全部删除</button>
<button ng-click="removeChecked()">批量删除</button>
</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="user_id[]" value="{{ $index }}"/>
</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="showEditPwdBox($index)">修改密码</button>
</td>
</tr>
</table>
<div>
<button ng-click="showAddUserBox()">添加用户</button>
</div>
<div ng-show="add_user_box_is_show">
<table border="1">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" ng-model="add_user_name"/>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="text" ng-model="add_user_password"/>
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input type="text" ng-model="add_user_repassword"/>
</td>
</tr>
<tr>
<td>
年龄：
</td>
<td>
<input type="text" ng-model="add_user_age"/>
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="text" ng-model="add_user_sex"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button ng-click="addUser()">提交</button>
</td>
</tr>
</table>
</table>
</div>
<div ng-show="edit_pwd_box_is_show">
<table border="1">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" ng-model="epwd_name" disabled/>
</td>
</tr>
<tr>
<td>
旧密码：
</td>
<td>
<input type="text" ng-model="epwd_old_password"/>
</td>
</tr>
<tr>
<td>
新密码：
</td>
<td>
<input type="text" ng-model="epwd_password"/>
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input type="text" ng-model="epwd_repassword"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="hidden" ng-model="epwd_index"/>
<button ng-click="editPwd()">提交</button>
</td>
</tr>
</table>
</div>
</body>
</html>
<html ng-app="UMApp">
<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 example_data = [
{
id: 1,
name: "曹操",
password: "123456",
age: 45,
sex: "男"
},
{
id: 2,
name: "张辽",
password: "123456",
age: 34,
sex: "男"
},
{
id: 3,
name: "司马懿",
password: "123456",
age: 30,
sex: "男"
},
{
id: 4,
name: "夏侯淳",
password: "123456",
age: 40,
sex: "男"
},
{
id: 5,
name: "蔡文姬",
password: "123456",
age: 18,
sex: "女"
},
{
id: 6,
name: "刘备",
password: "123456",
age: 50,
sex: "男"
},
{
id: 7,
name: "关羽",
password: "123456",
age: 45,
sex: "男"
},
{
id: 8,
name: "张飞",
password: "123456",
age: 46,
sex: "男"
},
{
id: 9,
name: "赵云",
password: "123456",
age: 35,
sex: "男"
},
{
id: 10,
name: "孙尚香",
password: "123456",
age: 28,
sex: "女"
},
{
id: 11,
name: "孙权",
password: "123456",
age: 30,
sex: "男"
},
{
id: 12,
name: "周瑜",
password: "123456",
age: 32,
sex: "男"
},
{
id: 13,
name: "鲁肃",
password: "123456",
age: 33,
sex: "男"
},
{
id: 14,
name: "黄盖",
password: "123456",
age: 55,
sex: "男"
},
{
id: 15,
name: "小乔",
password: "123456",
age: 28,
sex: "女"
},
{
id: 16,
name: "小乔",
password: "123456",
age: 26,
sex: "女"
}
];
</script>
<script type="text/javascript">
// 全选/全不选
$(function () {
$("input[name='check_all']").click(function () {
var checked = this.checked; // 获取 <input type="checkbox" name="check_all"/> 中checked属性的值
$("input[name='user_id[]']").each(function () {
this.checked = checked; // 依次设置每一个 <input type="checkbox" name="user_id[]"/> 中checked属性的值
});
});
});
var app = angular.module("UMApp", []);
app.controller("UMCtrl", function ($scope) {
// 查询的年龄区间
$scope.age_sections = [
{
txt: "10~20",
min: 10,
max: 20
},
{
txt: "20~30",
min: 20,
max: 30
},
{
txt: "30~40",
min: 30,
max: 40
},
{
txt: "40~50",
min: 40,
max: 50
},
{
txt: "50~60",
min: 50,
max: 60
},
{
txt: "60~70",
min: 60,
max: 70
},
{
txt: "70~80",
min: 70,
max: 80
}
];
$scope.data = example_data;
var id = 17;
var dataIsChange = false; // 数据是否有改变，用于查询时，判断是否需要备份数据
// 显示添加用户表单
$scope.showAddUserBox = function () {
$scope.add_user_box_is_show = true;
};
// 提交添加用户表单
$scope.addUser = function () {
if ($scope.add_user_name == undefined || $scope.add_user_name == "") {
alert("请输入用户名！");
return;
}
if ($scope.add_user_password == undefined || $scope.add_user_password == "") {
alert("请输入密码！");
return;
}
if ($scope.add_user_repassword == undefined || $scope.add_user_repassword == "") {
alert("请再次确认密码！");
return;
}
if ($scope.add_user_password != $scope.add_user_repassword) {
alert("两次密码不一致！");
return;
}
if ($scope.add_user_age == undefined || $scope.add_user_age == "") {
alert("请输入年龄！");
return;
}
if ($scope.add_user_sex == undefined || $scope.add_user_sex == "") {
alert("请输入性别！");
d363
return;
}
if (!/^\d+$/.test($scope.add_user_age)) {
alert("年龄必须整数！");
return;
}
var age = parseInt($scope.add_user_age);
if (age < 10 || age > 60) {
alert("年龄必须在10~60之间！");
return;
}
$scope.data.push({
id: id++,
name: $scope.add_user_name,
password: $scope.add_user_password,
age: $scope.add_user_age,
sex: $scope.add_user_sex
});
$scope.add_user_name = "";
$scope.add_user_password = "";
$scope.add_user_repassword = "";
$scope.add_user_age = "";
$scope.add_user_sex = "";
$scope.add_user_box_is_show = false;
};
// 显示修改密码表单
$scope.showEditPwdBox = function ($index) {
$scope.epwd_name = $scope.data[$index].name;
$scope.epwd_index = $index;
$scope.edit_pwd_box_is_show = true;
};
// 提交修改密码表单
$scope.editPwd = function () {
var user = $scope.data[$scope.epwd_index];
if ($scope.epwd_old_password == undefined || $scope.epwd_old_password == "") {
alert("请输入旧密码！");
return;
}
if ($scope.epwd_password == undefined || $scope.epwd_password == "") {
alert("请输入新密码！");
return;
}
if ($scope.epwd_repassword == undefined || $scope.epwd_repassword == "") {
alert("请再次确认密码！");
return;
}
if ($scope.epwd_old_password != user.password) {
alert("旧密码不正确！");
return;
}
if ($scope.epwd_password != $scope.epwd_repassword) {
alert("两次密码不一致！");
return;
}
$scope.data[$scope.epwd_index].password = $scope.epwd_password; // 修改密码
$scope.edit_pwd_box_is_show = false;
};
// 清空列表
$scope.removeAll = function () {
$scope.data = [];
};
// 删除选中项
$scope.removeChecked = function () {
var remove_idx_arr = []; // 待删除的所有索引
// 获取所有user_id[]并且被选择的Checkbox
$("input[name='user_id[]']:checked").each(function () {
var index = this.value; // <input type="checkbox" name="user_id[]" value="{{ $index }}"/>，value中保存了数组的索引
remove_idx_arr.push(index);
});
var data = $scope.data; // 备份当前列表
$scope.data = []; // 清空当前列表
for (var idx in data) {
// 索引不在待删除的所有索引中，添加到新列表中
if (remove_idx_arr.indexOf(idx) == -1) {
$scope.data.push(data[idx]);
}
}
};
$scope.search = function () {
var name = "";
var age = {}; // json对象，如：{ txt: "70~80", min: 70, max: 80 }
var sex = "";
if ($scope.search_name_value != undefined && $scope.search_name_value != null) {
name = $scope.search_name_value.trim();
}
// 未选中时值：undefined，选中“请选择”按钮时值：null
if ($scope.search_age_value != undefined && $scope.search_age_value != null && $scope.search_age_value != "") {
age = $scope.search_age_value; // age = json对象，如：{txt: "70~80", min: 70, max: 80 }
}
if ($scope.search_sex_value != undefined && $scope.search_sex_value != null) {
sex = $scope.search_sex_value;
}
// 没有可查询的项
if (name == "" && age == {} && sex == "") {
return;
}
console.log("需要查找的name: " + name + ", 需要查找的age区间: [" + age.min + "~" + age.max + "], 需要查找的sex: " + sex);
// 从全部数据中查找name、age、sex，找到后添加到列表中
for (var i in $scope.data) {
var item = $scope.data[i];
var index = parseInt(i) + 1; // 第一个tr是表头，所以用i + 1
// name相等，显示
if (item.name == name) {
$("tr:eq(" + index + ")").show();
continue;
}
// 性别满足，显示
if (item.sex == sex) {
$("tr:eq(" + index + ")").show();
continue;
}
if (age != {} && item.age >= age.min && item.age <= age.max) {
$("tr:eq(" + index + ")").show();
continue;
}
// 3个条件都不符合，隐藏
$("tr:eq(" + index + ")").hide();
}
};
});
</script>
</head>
<body ng-controller="UMCtrl">
<div>
<input type="text" ng-model="search_name_value" ng-change="search()" placeholder="用户名查询"/>
年龄：
<select ng-model="search_age_value" ng-options="section.txt for section in age_sections"
ng-change="search()">
<option value="">请选择</option>
</select>
性别：
<select ng-model="search_sex_value" ng-change="search()">
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<button ng-click="removeAll()">全部删除</button>
<button ng-click="removeChecked()">批量删除</button>
</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="user_id[]" value="{{ $index }}"/>
</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="showEditPwdBox($index)">修改密码</button>
</td>
</tr>
</table>
<div>
<button ng-click="showAddUserBox()">添加用户</button>
</div>
<div ng-show="add_user_box_is_show">
<table border="1">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" ng-model="add_user_name"/>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="text" ng-model="add_user_password"/>
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input type="text" ng-model="add_user_repassword"/>
</td>
</tr>
<tr>
<td>
年龄：
</td>
<td>
<input type="text" ng-model="add_user_age"/>
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="text" ng-model="add_user_sex"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button ng-click="addUser()">提交</button>
</td>
</tr>
</table>
</table>
</div>
<div ng-show="edit_pwd_box_is_show">
<table border="1">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" ng-model="epwd_name" disabled/>
</td>
</tr>
<tr>
<td>
旧密码：
</td>
<td>
<input type="text" ng-model="epwd_old_password"/>
</td>
</tr>
<tr>
<td>
新密码：
</td>
<td>
<input type="text" ng-model="epwd_password"/>
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input type="text" ng-model="epwd_repassword"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="hidden" ng-model="epwd_index"/>
<button ng-click="editPwd()">提交</button>
</td>
</tr>
</table>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- （angularjs） 数据的增删改查（添加用户，查询年龄，批量删除，全部删除，修改密码） 类似题
- 用户表（查询数据 、添加数据 、排序 、点击删除 、修改密码 、批量删除 、全部删除）
- AngularJS 用户名查询、年龄查询、性别查询、全部删除、批量删除、添加用户、修改密码
- 稳扎稳打Silverlight(58) - 4.0通信之WCF RIA Services: 通过 Domain Service, 以 MVVM 模式实现数据的添加、删除、修改和查询
- 稳扎稳打Silverlight(58) - 4.0通信之WCF RIA Services: 通过 Domain Service, 以 MVVM 模式实现数据的添加、删除、修改和查询
- SQL Server 数据的添加修改删除和查询
- mysql用户密码修改，用户添加、删除、设置权限及源文件恢复数据库
- AngularJS+用户查询+添加用户+修改密码
- 基本查询语句及利用SQL语句完成数据的添加、删除、修改操作
- 稳扎稳打Silverlight(58) - 4.0通信之WCF RIA Services: 通过 Domain Service, 以 MVVM 模式实现数据的添加、删除、修改和查询
- 注册、登陆、修改密码、添加、删除、查询的测试用例设计
- 稳扎稳打Silverlight(58) - 4.0通信之WCF RIA Services: 通过 Domain Service, 以 MVVM 模式实现数据的添加、删除、修改和查询
- cmd 命令行模式操作数据库 添加查询 修改 删除 （ 表 字段 数据）
- 通过 Domain Service, 以 MVVM 模式实现数据的添加、删除、修改和查询
- AngularJS 查询、全选、反选、全部删除、批量删除、添加、修改
- SQL Server 数据的添加修改删除和查询
- 稳扎稳打Silverlight(58) - 4.0通信之WCF RIA Services: 通过 Domain Service, 以 MVVM 模式实现数据的添加、删除、修改和查询
- 订单用户表2（用户名查询、手机号查询、选择城市、选择状态、选择月份、ID排序、添加数据、批量发货、批量删除、敏感字、修改数据）
- 表管理(数据类型、创建/修改表、添加/修改/删除数据、数据查询) 1.Oracle表的管理
- 稳扎稳打Silverlight(58) - 4.0通信之WCF RIA Services: 通过 Domain Service, 以 MVVM 模式实现数据的添加、删除、修改和查询