<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS+添加用户+修改密码</title>
<style>
*{
margin: 0 auto;
}
.box{
width: 800px;
height: 1000px;
}
</style>
<script src="../../angular-1.5.5/angular.js"></script>
<script>
var app = angular.module("myapp",[]);
app.controller("mycont",function ($scope) {
//数据
$scope.data = [{
done:false,
name:"张三",
pass:123,
age:22,
sex:"女"
},{
done:false,
name:"李四",
pass:456,
age:44,
sex:"男"
},{
done:false,
name:"王五",
pass:789,
age:33,
sex:"女"
},{
done:false,
name:"赵六",
pass:234,
age:55,
sex:"男"
}]
//根据年龄范围下拉菜单实现用户显示
$scope.ageSize = "--请选择--";
$scope.ageFilter = function (item) {
if ($scope.ageSize != "--请选择--"){
var ageSize = $scope.ageSize;
var arr = ageSize.split("-");
var min = arr[0];
var max = arr[1];
var age = item.age;
if(age<min || age>max){
return false;
} else {
return true;
}
} else {
return true;
}
}
//全部删除
$scope.delAll = function () {
$scope.data = [];
}
//批量删除
$scope.del = function () {
/*for(var i=0;i<$scope.data.length;i++){
if ($scope.data[i].done == false){
alert("请选择。。。");
}
}*/
for(var i=0;i<$scope.data.length;i++){
if ($scope.data[i].done == true){
$scope.data.splice(i,1);
i--;
}
}
}
//全选
$scope.checkAll = function () {
for(var i=0;i<$scope.data.length;i++){
if ($scope.check == true){
$scope.data[i].done = true;
} else {
$scope.data[i].done = false;
}
}
}
//添加用户
$scope.show = false;
$scope.add = function () {
$scope.show = true;
}
$scope.tj = function () {
if($scope.addname!=null&&$scope.addage>10&&$scope.addage<60){
$scope.data.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 data = $scope.data[index];
$scope.name = data.name;
$scope.index = index;
}
$scope.tjpass = function () {
if ($scope.data[$scope.index].pass != $scope.pass) {
alert("旧密码和新密码不一致");
return;
} else if ($scope.uppass != $scope.upsure) {
alert("两次密码不一致");
return;
}
$scope.data[$scope.index].pass = $scope.uppass;
$scope.name ="";
$scope.pass="";
$scope.uppass="";
$scope.upsure="";
$scope.show = false;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="mycont">
<div class="box">
<br>
<h2 style="padding-left: 300px">用户信息表</h2>
<br>
<div style="padding-left: 100px">
<input type="text" placeholder="用户名查询" ng-model="search">
年龄 : <select ng-model="ageSize">
<option>--请选择--</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
<option>51-60</option>
</select>
性别 : <select ng-model="sear">
<option>男</option>
<option>女</option>
</select>
<button ng-click="delAll()">全部删除</button>
<button ng-click="del()">批量删除</button>
</div>
<br/>
<table cellpadding="10" cellspacing="1" border="soild 1px #000">
<tr>
<th><input type="checkbox" ng-click="checkAll()" ng-model="check">全选</th>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in data|filter:{name:search}|filter:{sex:sear}|filter:ageFilter">
<td><input type="checkbox" ng-model="item.done"></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>
</table>
<br/><br/>
<div 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>
