<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular-1.5.5/angular.min.js"></script>
<style>
*{
text-align: center;
}
table{
border-collapse: collapse;
margin: 20px auto;
}
th,td{
padding: 10px;
border: 1px solid #000;
}
</style>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.data=[{
id:1,
name:"张三",
pas:"123",
age:"23",
sex:"男",
check:false
},{
id:2,
name:"李四",
pas:"345",
age:"20",
sex:"女",
check:false
},{
id:3,
name:"王五",
pas:"23",
age:"45",
sex:"女",
check:false
},{
id:4,
name:"赵六",
pas:"789",
age:"45",
sex:"女",
check:false
},{
id:5,
name:"赵四",
pas:"7887",
age:"23",
sex:"男",
check:false
}];
$scope.ageSize="--请选择--"
$scope.ageFun=function (item) {
if($scope.ageSize!="--请选择--"){
var arr=$scope.ageSize.split("-");
var min=arr[0];
var max=arr[1];
if(item.age>max||item.age<min){
return false;
}else{
return true;
}
}else{
return true;
}
};
$scope.sex="--请选择--";
$scope.sexFun=function (item) {
if($scope.sex!="--请选择--"){
if(item.sex==$scope.sex){
return true;
}else{
return false;
}
}else{
return true;
}
};
$scope.delAll=function () {
$scope.data.length=0;
};
$scope.checkBtn=false;
$scope.checkAll=function () {
if($scope.checkBtn==true){
for(var i=0;i<$scope.data.length;i++){
$scope.data[i].check=true;
}
}else{
for(var i=0;i<$scope.data.length;i++){
$scope.data[i].check=false;
}
}
}
var n=0;
$scope.fx=function (index) {
if($scope.data[index].check==true){
n++;
}else{
n--;
}
if(n==$scope.data.length){
$scope.checkBtn=true;
}else{
$scope.checkBtn=false;
}
};
$scope.del=function () {
for(var i=0;i<$scope.data.length;i++){
if($scope.data[i].check==true){
$scope.data.splice(i,1);
i--;
}
}
};
$scope.show=false;
$scope.addUser=function () {
$scope.show=true;
};
$scope.tj=function () {
if($scope.nameNext==""||$scope.nameNext==null){
alert("姓名");
}else if($scope.correct==true){
$scope.data[$scope.index].pas=$scope.pasNext;
}else{
$scope.data.push({
name:$scope.nameNext,
pas:$scope.pasNext,
age:$scope.ageNext,
sex:$scope.sexNext,
check:false
})
}
$scope.show=false;
};
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<span>姓名查找</span>
<input type="text" placeholder="请输入姓名" ng-model="search">
<span>年龄查找</span>
<select ng-model="ageSize">
<option>--请选择--</option>
<option>10-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
</select>
<span>性别查找</span>
<select ng-model="sex">
<option>--请选择--</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="delAll()">删除全部</button>
<button ng-click="del()">批量删除</button>
<table>
<thead>
<tr>
<th><input type="checkbox" ng-model="checkBtn" ng-click="checkAll()">全选</th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data|filter:{name:search}|filter:ageFun|filter:sexFun">
<td><input type="checkbox" ng-model="item.check" ng-click="fx($index)"></td>
<td>{{$index}}</td>
<td>{{item.name}}</td>
<td>{{item.pas}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button ng-click="correct($index)">修改密码</button></td>
</tr>
</tbody>
</table>
<button ng-click="addUser()">添加用户</button>
<table ng-show="show">
<tbody>
<tr>
<td>姓名</td>
<td><input type="text" ng-model="nameNext" placeholder="请输入姓名"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="number" ng-model="pasNext" placeholder="请输入密码"></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" ng-model="ageNext" placeholder="请输入年龄"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="text" ng-model="sexNext" placeholder="请输入性别"></td>
</tr>
<tr>
<td colspan="2"><button ng-click="tj()">提交</button></td>
</tr>
</tbody>
</table>
</body>
angularJS排序查找添加
最新推荐文章于 2022-05-11 18:41:43 发布