<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS+添加用户+修改密码</title>
//这里是angular包
<style>
*{
margin: 0 auto;
}
.box{
width: 800px;
border: 1px solid #555555;
height: 1000px;
}
</style>
<script>
var app = angular.module("myapp",[]);
app.controller("myCtrl",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.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.delAll=function () {
$scope.data=[];
}
//批量删除
$scope.del=function () {
for(var i=0;i<$scope.data.length;i++){
if($scope.data[i].done==true){
$scope.data.splice(i,1);
i--;
}
}
};
//根据年龄范围下拉菜单实现用户显示
$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;
}
};
});
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<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:{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>
</div>
</body>
</html>
08-26
08-26