<!DOCTYPE html>
<html ng-app="jun">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.module("jun",[])
.controller("dd",function($scope){
$scope.people=[];
$scope.xz=false;
$scope.add=function(){
var name=$("#name").val();
var mima=$("#mima").val();
var age=$("#age").val();
var sex=$("#sex").val();
$scope.people.push({
state:false,
"name":name,
"mima":mima,
"age":age,
"sex":sex
})
}
$scope.all=function(xzdel){
for (var i=0;i<$scope.people.length;i++) {
if(xzdel==true){
$scope.people[i].state=true;
}else{
$scope.people[i].state=false;
}
}
}
$scope.alldel=function(){
$scope.people.splice(0,$scope.people.length)
}
$scope.del=function(){
for (var i=0;i<$scope.people.length;i++) {
if($scope.people[i].state){
$scope.people.splice(i,1)
i--;
}
}
}
$scope.xg=function(obj){
var nmima=prompt("请输入新的密码!");
obj.mima=nmima;
}
$scope.other=function(age, ageFilter){
if (ageFilter != "--请选择--") {
var agess = ageFilter.split("-");
var ageMin = agess[0];
var ageMax = agess[1];
if (age < ageMin || age > ageMax) {
return false;
} else {
return true;
}
} else {
return true;
}
}
})
$(function(){
window.setInterval(function(){
$("tr:even").css("background-color","red");
$("tr:odd").css("background-color","green");
})
})
</script>
</head>
<body ng-controller="dd">
姓名查找
<input type="text" ng-model="namefilter"/>
年龄
<select ng-model="ageFilter" ng-init="ageFilter='--请选择--'">
<option>10-20</option>
<option>20-30</option>
<option>30-40</option>
<option>40-50</option>
</select>
性别
<select ng-model="sexfilter">
<option>请选择</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="alldel()">删除全部</button>
<button ng-click="del()">批量删除</button>
<br />
<table border="1px" cellspacing="1px" cellpadding="1px">
<tr>
<th>
全选
<input type="checkbox" ng-click="all(xzdel)"/>
</th>
<th>
序号
</th>
<th>
姓名
</th>
<th>
密码
</th>
<th>
年龄
</th>
<th>
性别
</th>
<th>
操作
</th>
</tr>
<tr ng-repeat="item in people | filter : namefilter|filter:sexfilter" ng-if="other(item.age,ageFilter)">
<td>
<input type="checkbox" ng-checked="xz" ng-model="item.state">
</td>
<td>
{{$index}}
</td>
<td>
{{item.name}}
</td>
<td>
{{item.mima}}
</td>
<td>
{{item.age}}
</td>
<td>
{{item.sex}}
</td>
<td>
<button ng-click="xg(item)">修改密码</button>
</td>
</tr>
</table>
<br />
<form>
<button>添加用户</button>
<br />
<br />
<table border="1px" cellspacing="1px" cellpadding="1px">
<tr>
<td>
姓名
<input type="text" id="name" placeholder="请输入姓名"/>
</td>
</tr>
<tr>
<td>
密码
<input type="text" id="mima" placeholder="请输入密码"/>
</td>
</tr>
<tr>
<td>
年龄
<input type="text" id="age" placeholder="请输入年龄"/>
</td>
</tr>
<tr>
<td>
性别
<input type="text" id="sex" placeholder="请输入性别"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="提交" ng-click="add()"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<html ng-app="jun">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.module("jun",[])
.controller("dd",function($scope){
$scope.people=[];
$scope.xz=false;
$scope.add=function(){
var name=$("#name").val();
var mima=$("#mima").val();
var age=$("#age").val();
var sex=$("#sex").val();
$scope.people.push({
state:false,
"name":name,
"mima":mima,
"age":age,
"sex":sex
})
}
$scope.all=function(xzdel){
for (var i=0;i<$scope.people.length;i++) {
if(xzdel==true){
$scope.people[i].state=true;
}else{
$scope.people[i].state=false;
}
}
}
$scope.alldel=function(){
$scope.people.splice(0,$scope.people.length)
}
$scope.del=function(){
for (var i=0;i<$scope.people.length;i++) {
if($scope.people[i].state){
$scope.people.splice(i,1)
i--;
}
}
}
$scope.xg=function(obj){
var nmima=prompt("请输入新的密码!");
obj.mima=nmima;
}
$scope.other=function(age, ageFilter){
if (ageFilter != "--请选择--") {
var agess = ageFilter.split("-");
var ageMin = agess[0];
var ageMax = agess[1];
if (age < ageMin || age > ageMax) {
return false;
} else {
return true;
}
} else {
return true;
}
}
})
$(function(){
window.setInterval(function(){
$("tr:even").css("background-color","red");
$("tr:odd").css("background-color","green");
})
})
</script>
</head>
<body ng-controller="dd">
姓名查找
<input type="text" ng-model="namefilter"/>
年龄
<select ng-model="ageFilter" ng-init="ageFilter='--请选择--'">
<option>10-20</option>
<option>20-30</option>
<option>30-40</option>
<option>40-50</option>
</select>
性别
<select ng-model="sexfilter">
<option>请选择</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="alldel()">删除全部</button>
<button ng-click="del()">批量删除</button>
<br />
<table border="1px" cellspacing="1px" cellpadding="1px">
<tr>
<th>
全选
<input type="checkbox" ng-click="all(xzdel)"/>
</th>
<th>
序号
</th>
<th>
姓名
</th>
<th>
密码
</th>
<th>
年龄
</th>
<th>
性别
</th>
<th>
操作
</th>
</tr>
<tr ng-repeat="item in people | filter : namefilter|filter:sexfilter" ng-if="other(item.age,ageFilter)">
<td>
<input type="checkbox" ng-checked="xz" ng-model="item.state">
</td>
<td>
{{$index}}
</td>
<td>
{{item.name}}
</td>
<td>
{{item.mima}}
</td>
<td>
{{item.age}}
</td>
<td>
{{item.sex}}
</td>
<td>
<button ng-click="xg(item)">修改密码</button>
</td>
</tr>
</table>
<br />
<form>
<button>添加用户</button>
<br />
<br />
<table border="1px" cellspacing="1px" cellpadding="1px">
<tr>
<td>
姓名
<input type="text" id="name" placeholder="请输入姓名"/>
</td>
</tr>
<tr>
<td>
密码
<input type="text" id="mima" placeholder="请输入密码"/>
</td>
</tr>
<tr>
<td>
年龄
<input type="text" id="age" placeholder="请输入年龄"/>
</td>
</tr>
<tr>
<td>
性别
<input type="text" id="sex" placeholder="请输入性别"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="提交" ng-click="add()"/>
</td>
</tr>
</table>
</form>
</body>
</html>