下面代码是一个简单的用户信息管理表!
<!DOCTYPE html>
<html ng-app="UApp">
<head lang="en">
<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="angular-1.3.0.js"></script>
<script type="text/javascript" src="jquery.1.12.4.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: 28,
sex: "女"
},
{
id: 6,
name: "小乔",
password: "123456",
age: 26,
sex: "女"
}
];
</script>
<script type="text/javascript">
var app = angular.module("UApp",[]);
app.controller("MyCtrl",function($scope) {
$scope.data = example_data;
// 查询的年龄区间
$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
}
];
// 清空列表:$scope.data前,备份下全部数据
var oldData = $scope.data;
$scope.search = function () {
var name = "";
var age = {}; // json对象,如:{txt: "70~80", min: 70, max: 80 }
var sex = "";
if ($scope.search_name != undefined && $scope.search_name != null) {
name = $scope.search_name.trim();
}
// 未选中时值:undefined,选中“请选择”按钮时值:null
if ($scope.search_age != undefined && $scope.search_age != null && $scope.search_age != "") {
age = $scope.search_age; // age = json对象,如:{txt: "70~80", min: 70, max: 80 }
}
if ($scope.search_sex != undefined && $scope.search_sex != null) {
sex = $scope.search_sex;
}
// 没有可查询的项
if (name == "" && age == "" && sex == "") {
return;
}
console.log("需要查找的name: " + name + ", 需要查找的age区间: [" + age.min + "~" + age.max + "], 需要查找的sex: " + sex);
// 清空列表
$scope.data = [];
// 从全部数据中查找name、age、sex,找到后添加到列表中
for (var i in oldData) {
// name和age、sex 只要满足其中一个要求就可以添加到列表
var item = oldData[i];
// name相等,添加列表
if (item.name == name) {
$scope.data.push(item);
continue;
}
// age在区间,添加列表,age = json对象,如:{txt: "70~80", min: 70, max: 80 }
if (item.age >= age.min && item.age <= age.max) {
$scope.data.push(item);
continue;
}
// sex相等,添加列表
if (item.sex == sex) {
$scope.data.push(item);
continue;
}
}
};
$scope.removeAll = function() {
$scope.data = [];
}
$scope.removeCheck = function() {
var remove_idx_arr = [];// 待删除的所有索引
//获取所有users并且被选择的checkbox
$("input[name='users']:checked").each(function() {
var indexs = this.value;
remove_idx_arr.push(indexs);
});
var data = $scope.data;//备份当前列表
$scope.data = [];//清空
for(var idx in data) {
// 索引不在待删除的所有索引中,添加到新列表中
if(remove_idx_arr.indexOf(idx) == -1) {
$scope.data.push(data[idx]);
}
}
};
$(function() {
$("input[name='check_all']").click(function() {
var cheed = this.checked;
$("input[name='users']").each(function() {
this.checked = cheed;
});
});
});
$scope.addUser = function () {
$scope.addUserIsShow = true;
};
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.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.editUserIsShow = false;
};
});
</script>
<style>
.btn {
margin-left: 130px;
margin-top: 25px;
}
</style>
</head>
<body ng-controller="MyCtrl">
<div>
<input type="text" ng-model="search_name" ng-change="search()" placeholder="用户名查询">
年龄:
<select ng-model="search_age" ng-options="section.txt for section in age_sections"
ng-change="search()">
<option value="">请选择</option>
</select>
性别:
<select ng-model="search_sex" ng-change="search()">
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<button ng-click="removeAll()">全部删除</button>
<button ng-click="removeCheck()">批量删除</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>
</th>
</tr>
<tr ng-repeat="user in data">
<td>
<input type="checkbox" name="users" 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="editUser($index)">修改密码</button>
</td>
</tr>
</table>
<button class="btn" 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>
</body>
</html>