<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
margin: 0 auto;
text-align: center;
}
table {
margin: 20px auto;
border-collapse: collapse;
}
th, td {
padding: 15px;
border: 1px solid #000000;
}
.aaa{
margin: 0 auto;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
//声明主模块
var myapp = angular.module("myapp", []);
//添加控制器
myapp.controller("myCtrl", function ($scope) {
$scope.users = [{
"name": "张三",
"pass": 123,
"age": 22,
"sex": "男",
"done": false
}, {
"name": "李四",
"pass": 456,
"age": 33,
"sex": "女",
"done": false
}, {
"name": "王五",
"pass": 789,
"age": 44,
"sex": "男",
"done": false
}];
//年龄过滤查询
$scope.ageSize = "--请选择--";
$scope.ageFilter = function (item) {
if ($scope.ageSize != "--请选择--") {
var ageSize = $scope.ageSize;
var ageArr = ageSize.split("-");
var min = ageArr[0];
var max = ageArr[1];
var age = item.age;
if (age > max || age < min) {
return false;
} else {
return true;
}
} else {
return true;
}
};
//全选
$scope.checkAll = function () {
for (var i = 0; i < $scope.users.length; i++) {
if ($scope.search == true) {
$scope.users[i].done = true;
} else {
$scope.users[i].done = false;
}
}
}
//反选
var n = 0;
$scope.fanxuan = function () {
for (var i=0;i<$scope.users.length;i++){
if ($scope.users[i].done == true) {
n++;
} else {
n--;
}
if (n == $scope.users.length) {
$scope.search = true;
} else {
$scope.search = false;
}
}
}
//全部删除
$scope.deleteAll=function () {
$scope.users=[];
}
//批量删除
$scope.del=function () {
for (var i=0;i<$scope.users.length;i++){
if ($scope.users[i].done == true){
$scope.users.splice(i,1);
i--;
}
}
}
//添加用户
$scope.show = false;
$scope.add = function () {
$scope.show = true;
}
//提交
$scope.tj = function () {
if($scope.addname!=null&&$scope.addage>10&&$scope.addage<60){
$scope.users.push({"done":false,"name":$scope.addname,"pass":$scope.addpass,"age":$scope.addage,"sex":$scope.addsex});
} else {
alert("不满足条件");
}
$scope.addname="";
$scope.addpass="";
$scope.addage="";
$scope.addsex="";
$scope.show = false;
}
//修改密码
$scope.shows = false;
$scope.up = function (index) {
$scope.shows = true;
var user = $scope.users[index];
$scope.name = user.name;
$scope.index = index;
}
$scope.tjpass = function () {
if ($scope.users[$scope.index].pass != $scope.pass) {
alert("旧密码和新密码不一致");
return;
} else if ($scope.uppass != $scope.upsure) {
alert("两次密码不一致");
return;
}
$scope.users[$scope.index].pass = $scope.uppass;
$scope.name ="";
$scope.pass="";
$scope.uppass="";
$scope.upsure="";
$scope.show = false;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div class="box">
<h1>用户信息表</h1>
<input type="text" placeholder="用户名查询" ng-model="sel">
年龄:<select ng-model="ageSize">
<option>--请选择--</option>
<option>0-10</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
</select>
性别:<select>
<option>男</option>
<option>女</option>
</select>
<button ng-click="deleteAll()">全部删除</button>
<button ng-click="del()">批量删除</button>
<br/>
</div>
<table>
<thead>
<tr>
<th><input type="checkbox" ng-click="checkAll()" ng-model="search"></th>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in users|filter:{name:sel}|filter:ageFilter">
<td><input type="checkbox" ng-model="item.done" ng-click="fanxuan($index)"></td>
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.pass}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>
<button ng-click="up($index)">修改密码</button>
</td>
</tr>
</tbody>
</table>
<br/><br/>
<div class="aaa" style="width: 100px; height: 60px;"><button ng-click="add()">添加用户</button></div>
<div ng-show="show">
<table cellpadding="10" cellspacing="1" border="soild 1px #000">
<tr>
<td>用户名:</td>
<td><input type="text" placeholder="请输入用户名" ng-model="addname"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" placeholder="请输入密码" ng-model="addpass"></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" placeholder="请输入年龄" ng-model="addage"></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="text" placeholder="请输入性别" ng-model="addsex"></td>
</tr>
<tr align="center">
<td colspan="2"><button ng-click="tj()">提交</button></td>
</tr>
</table>
</div>
<div ng-show="shows">
<table cellpadding="10" cellspacing="1" border="soild 1px #000">
<tr>
<td>用户名:</td>
<td><input type="text" placeholder="用户名" ng-model="name"></td>
</tr>
<tr>
<td>旧密码:</td>
<td><input type="text" placeholder="旧密码" ng-model="pass"></td>
</tr>
<tr>
<td>新密码:</td>
<td><input type="text" placeholder="新密码" ng-model="uppass"></td>
</tr>
<tr>
<td>确认新密码:</td>
<td><input type="text" placeholder="请再次输入新密码" ng-model="upsure"></td>
</tr>
<tr align="center">
<td colspan="2"><button ng-click="tjpass()">提交</button></td>
</tr>
</table>
</div>
<p></p>
</div>
</body>
</html>
用户信息表(添加用户信息+修改密码)
最新推荐文章于 2024-07-08 02:26:59 发布