<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<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 app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.data = [
{
id: 1,
name: "aa",
password: "aa",
age: 10,
sex: "男",
state:false
},
{
id: 2,
name: "bb",
password: "bb",
age: 20,
sex: "男",
state:false
},
{
id: 3,
name: "cc",
password: "cc",
age: 30,
sex: "男",
state:false
},
{
id: 4,
name: "dd",
password: "dd",
age: 40,
sex: "男",
state:false
}
]
var id=5;
//点击按钮添加
$scope.add=function(){
$scope.data.push({
id:id++,
name:$scope.name,
password: $scope.password,
age: $scope.age,
sex: $scope.sex,
state:false
})
$scope.name = "";
$scope.password = "";
$scope.age = "";
$scope.sex = "";
$scope.addUserIsShow = false;
}
$scope.addUser=function(){
$scope.addUserIsShow=true;
}
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<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 app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.data = [
{
id: 1,
name: "aa",
password: "aa",
age: 10,
sex: "男",
state:false
},
{
id: 2,
name: "bb",
password: "bb",
age: 20,
sex: "男",
state:false
},
{
id: 3,
name: "cc",
password: "cc",
age: 30,
sex: "男",
state:false
},
{
id: 4,
name: "dd",
password: "dd",
age: 40,
sex: "男",
state:false
}
]
var id=5;
//点击按钮添加
$scope.add=function(){
$scope.data.push({
id:id++,
name:$scope.name,
password: $scope.password,
age: $scope.age,
sex: $scope.sex,
state:false
})
$scope.name = "";
$scope.password = "";
$scope.age = "";
$scope.sex = "";
$scope.addUserIsShow = false;
}
$scope.addUser=function(){
$scope.addUserIsShow=true;
}
//年龄范围的筛选
$scope.ageFan = function(age,ageSize){
var arr = ageSize.split("-");
var min = arr[0];
var max = arr[1];
if(ageSize == "不限"){
return true;
}else {
if (age > min && age < max) {
return true;
} else {
return false;
}
}
}
//全部删除
$scope.deleteAll = function () {
for(i=0;i<$scope.data.length;i++){
$scope.data.splice(i,$scope.data.length);
}
}
//批量删除
$scope.deletePi = function(){
var flag = true;
//for遍历所有数据,判断状态是否为true,是true就证明选中了.
for(i = 0;i<$scope.data.length;i++){
//选中了就会执行删除splice方法,删除的时候下表会跟随变化,所以要i.
if($scope.data[i].state == true){
$scope.data.splice(i,1);
flag=false;
i--;
}
}
//如果flag执行到这等于false那么就证明有选中的,如果等于true就证明没走if里面的方法
if(flag){
alert("请勾选条目");
}
}
//点击全选
$scope.switchAll = function(){
for(i = 0;i<$scope.data.length;i++){
if($scope.che == true) {
$scope.data[i].state = true;
}else{
$scope.data[i].state = false;
}
}
}
//点击user的时候id也跟着消失
$scope.itemche= function () {
var count=0;
for(i = 0;i<$scope.data.length;i++){
if($scope.data[i].state==true){
count++;
}
}
if(count == $scope.data.length){
$scope.che=true;
}else{
$scope.che=false;
}
}
//每个条目后的修改按钮
$scope.editUser = function (name,$index) {
$scope.e_name = name;
}
//修改完成的提交按钮
$scope.edit = function () {
var isno =true;
for(i=0;i<$scope.data.length;i++){
//判断旧密码与新密码是否相等
if($scope.data[i].password == $scope.e_old_password){
//判断两次输入的新密码是否一致
if($scope.e_password == $scope.e_repassword) {
//拿到你点击的用户名,修改当前用户名的密码
if ($scope.data[i].name == $scope.e_name) {
//将你的新密码赋值给当前对象(也就是覆盖旧密码)
$scope.data[i].password = $scope.e_password;
}
}
isno = false;
}
}
if(isno){
alert("旧密码不正确");
}
}
});
//复选框.each遍历
/* $(function(){
$("input[name='check_all']").click(function(){
var ck=this.checked;
$("input[name='users']").each(function(){
this.checked=ck;
})
})
});*/
</script>
</head>
<body ng-controller="myCtrl">
<input type="text" ng-model="guolv" placeholder="输入用户名">
年龄:<select ng-model="ageSize" ng-init="ageSize='不限'">
<option>不限</option>
<option>0-11</option>
<option>12-21</option>
<option>22-31</option>
<option>32-41</option>
<option>42-51</option>
<option>52-61</option>
</select>
性别:
<select ng-model="sexss">
<option>男</option>
<option>女</option>
</select>
<button ng-click="deleteAll()">全部删除</button>
<button ng-click="deletePi()">批量删除</button>
<table border="1px">
<tr>
<th>
<input type="checkbox" name="check_all" ng-click="switchAll()" ng-model="che">
</th>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="user in data | filter:{name:guolv}|filter:{sex:sexss}" ng-if="ageFan(user.age,ageSize)">
<td>
<input type="checkbox" name="users" ng-model="user.state" ng-click="itemche()">
</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(user.name,$index)">修改密码</button>
</td>
</tr>
</table>
<button ng-click="addUser()">添加用户</button>
<div ng-show="addUserIsShow">
<table border="1px">
<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>
</head>
<body ng-controller="myCtrl">
<input type="text" ng-model="guolv" placeholder="输入用户名">
年龄:<select ng-model="ageSize" ng-init="ageSize='不限'">
<option>不限</option>
<option>0-11</option>
<option>12-21</option>
<option>22-31</option>
<option>32-41</option>
<option>42-51</option>
<option>52-61</option>
</select>
性别:
<select ng-model="sexss">
<option>男</option>
<option>女</option>
</select>
<button ng-click="deleteAll()">全部删除</button>
<button ng-click="deletePi()">批量删除</button>
<table border="1px">
<tr>
<th>
<input type="checkbox" name="check_all" ng-click="switchAll()" ng-model="che">
</th>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="user in data | filter:{name:guolv}|filter:{sex:sexss}" ng-if="ageFan(user.age,ageSize)">
<td>
<input type="checkbox" name="users" ng-model="user.state" ng-click="itemche()">
</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(user.name,$index)">修改密码</button>
</td>
</tr>
</table>
<button ng-click="addUser()">添加用户</button>
<div ng-show="addUserIsShow">
<table border="1px">
<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>
<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">
<button ng-click="edit()">提交</button>
</td>
</tr>
</table>
</div>
</body>
</html>
<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">
<button ng-click="edit()">提交</button>
</td>
</tr>
</table>
</div>
</body>
</html>