<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/angular.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("mycon",function($scope){
$scope.shuzu=[
{
name:"张飞",
pass:1234567,
age:19,
sex:"男",
state:focus
},
{
name:"关羽",
pass:123456734,
age:20,
sex:"男",
state:focus
},
{
name:"赵云",
pass:1264567,
age:18,
sex:"男",
state:focus
},
]
//添加
$scope.jia=false;
$scope.add=function(){
var newname=$scope.x_name;
var newpass=$scope.x_pass;
//非空
$scope.errors=[];
if(newname=="" || newname==undefined){
$scope.errors.push("用户名不能为空");
}
if(newpass=="" || newpass==undefined){
$scope.errors.push("密码不能为空");
}
if($scope.errors.length==0){
var s={
name:newname,
pass:newpass,
age:$scope.x_age,
sex:$scope.x_sex,
}
$scope.shuzu.push(s);
$scope.jia=false;
}
}
//全选
$scope.quan=false;
$scope.xuan=function(){
if($scope.quan){
for(index in $scope.shuzu){
$scope.shuzu[index].state=true
}
}else{
for(index in $scope.shuzu){
$scope.shuzu[index].state=false
}
}
}
//批量删除
$scope.pisan=function(){
if(confirm("确认删除吗")){
for(var i=0;i<$scope.shuzu.length;i++){
if($scope.shuzu[i].state==true){
$scope.shuzu.splice(i, 1);
i--;
}
}
}
}
//全删
$scope.qsan=function(){
if(confirm("确认全部删除吗")){
for(var i=0;i<$scope.shuzu.length;i++){
$scope.shuzu.splice(i, 1);
i--;
}
}
}
//判断年龄区间
$scope.ageSize=function(age){
if($scope.size=="" || $scope.size==undefined){
return true;
}else{
var a=$scope.size.split("-");
var min=a[0];
var max=a[1];
if(age>=min && age<=max){
return true;
}else{
return false;
}
}
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycon" >
<center>
姓名查找<input type="text" ng-model="mohu"/>
年龄查找<select ng-model="size">
<option value="">请选择</option>
<option>1-10</option>
<option>10-20</option>
<option>20-30</option>
</select>
性别查找<select ng-model="xing">
<option value="">-请选择-</option>
<option value="男">--男--</option>
<option value="女">--女--</option>
</select>
<button ng-click="qsan()">删除全部</button>
<button ng-click="pisan()">批量删除</button><br><br>
<table cellpadding="15" cellspacing="0" border="1">
<thead>
<tr>
<th>全选<input type="checkbox" ng-click="xuan()" ng-model="quan"></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="diao in shuzu | filter:{name:mohu} | filter:{sex:xing}" align="center" ng-if="ageSize(diao.age)">
<td><input type="checkbox" ng-model="diao.state"></td>
<td>{{$index}}</td>
<td>{{diao.name}}</td>
<td><span ng-hide="mikuan">{{diao.pass}}</span><span ng-show="mikuan"><input type="text" ng-model="diao.pass"><button ng-click="mikuan=false">保存</button></span></td>
<td>{{diao.age}}</td>
<td>{{diao.sex}}</td>
<td><button ng-click="mikuan=true">修改密码</button></td>
</tr>
</tbody>
</table>
<br>
<button ng-click="jia=true">添加用户</button><br><br>
<table cellpadding="10" cellspacing="0" border="1" ng-show="jia">
<tr>
<td>姓名</td>
<td><input type="text" placeholder="请输入姓名" ng-model="x_name"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" placeholder="请输入密码" ng-model="x_pass"></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" placeholder="请输入年龄" ng-model="x_age"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="text" placeholder="请输入性别" ng-model="x_sex"></td>
</tr>
<tr align="center">
<td colspan="2"><button ng-click="add()">提交</button></td>
</tr>
</table>
<p ng-show="errors.length!=0" ng-repeat="e in errors">{{e}}</p>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/angular.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("mycon",function($scope){
$scope.shuzu=[
{
name:"张飞",
pass:1234567,
age:19,
sex:"男",
state:focus
},
{
name:"关羽",
pass:123456734,
age:20,
sex:"男",
state:focus
},
{
name:"赵云",
pass:1264567,
age:18,
sex:"男",
state:focus
},
]
//添加
$scope.jia=false;
$scope.add=function(){
var newname=$scope.x_name;
var newpass=$scope.x_pass;
//非空
$scope.errors=[];
if(newname=="" || newname==undefined){
$scope.errors.push("用户名不能为空");
}
if(newpass=="" || newpass==undefined){
$scope.errors.push("密码不能为空");
}
if($scope.errors.length==0){
var s={
name:newname,
pass:newpass,
age:$scope.x_age,
sex:$scope.x_sex,
}
$scope.shuzu.push(s);
$scope.jia=false;
}
}
//全选
$scope.quan=false;
$scope.xuan=function(){
if($scope.quan){
for(index in $scope.shuzu){
$scope.shuzu[index].state=true
}
}else{
for(index in $scope.shuzu){
$scope.shuzu[index].state=false
}
}
}
//批量删除
$scope.pisan=function(){
if(confirm("确认删除吗")){
for(var i=0;i<$scope.shuzu.length;i++){
if($scope.shuzu[i].state==true){
$scope.shuzu.splice(i, 1);
i--;
}
}
}
}
//全删
$scope.qsan=function(){
if(confirm("确认全部删除吗")){
for(var i=0;i<$scope.shuzu.length;i++){
$scope.shuzu.splice(i, 1);
i--;
}
}
}
//判断年龄区间
$scope.ageSize=function(age){
if($scope.size=="" || $scope.size==undefined){
return true;
}else{
var a=$scope.size.split("-");
var min=a[0];
var max=a[1];
if(age>=min && age<=max){
return true;
}else{
return false;
}
}
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycon" >
<center>
姓名查找<input type="text" ng-model="mohu"/>
年龄查找<select ng-model="size">
<option value="">请选择</option>
<option>1-10</option>
<option>10-20</option>
<option>20-30</option>
</select>
性别查找<select ng-model="xing">
<option value="">-请选择-</option>
<option value="男">--男--</option>
<option value="女">--女--</option>
</select>
<button ng-click="qsan()">删除全部</button>
<button ng-click="pisan()">批量删除</button><br><br>
<table cellpadding="15" cellspacing="0" border="1">
<thead>
<tr>
<th>全选<input type="checkbox" ng-click="xuan()" ng-model="quan"></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="diao in shuzu | filter:{name:mohu} | filter:{sex:xing}" align="center" ng-if="ageSize(diao.age)">
<td><input type="checkbox" ng-model="diao.state"></td>
<td>{{$index}}</td>
<td>{{diao.name}}</td>
<td><span ng-hide="mikuan">{{diao.pass}}</span><span ng-show="mikuan"><input type="text" ng-model="diao.pass"><button ng-click="mikuan=false">保存</button></span></td>
<td>{{diao.age}}</td>
<td>{{diao.sex}}</td>
<td><button ng-click="mikuan=true">修改密码</button></td>
</tr>
</tbody>
</table>
<br>
<button ng-click="jia=true">添加用户</button><br><br>
<table cellpadding="10" cellspacing="0" border="1" ng-show="jia">
<tr>
<td>姓名</td>
<td><input type="text" placeholder="请输入姓名" ng-model="x_name"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" placeholder="请输入密码" ng-model="x_pass"></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" placeholder="请输入年龄" ng-model="x_age"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="text" placeholder="请输入性别" ng-model="x_sex"></td>
</tr>
<tr align="center">
<td colspan="2"><button ng-click="add()">提交</button></td>
</tr>
</table>
<p ng-show="errors.length!=0" ng-repeat="e in errors">{{e}}</p>
</center>
</body>
</html>