学生管理反选删除

最新推荐文章于 2022-10-26 16:54:51 发布

GLqueen110

最新推荐文章于 2022-10-26 16:54:51 发布

阅读量185

点赞数

本文链接：https://blog.csdn.net/guoleisb10/article/details/78311908

版权

<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>


</style>
<script type="text/javascript" src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);


//主控制器
app.controller("myCtrl", function($scope) {
$scope.users = [{
id: 1,
name: "a",
pwd: "111",
age: 12,
sex: "男",
state: false
},
{
id: 2,
name: "b",
pwd: "222",
age: 23,
sex: "男",
state: false
},
{
id: 3,
name: "c",
pwd: "333",
age: 34,
sex: "女",
state: false
},
{
id: 4,
name: "d",
pwd: "444",
age: 45,
sex: "女",
state: false
},
{
id: 5,
name: "e",
pwd: "555",
age: 56,
sex: "女",
state: false
}
];


$scope.title = 'name';
$scope.desc = 0;
$scope.key = '';
$scope.ageSize = "";
$scope.setSex = "";


$scope.myorderBy = function(name) {
$scope.title = name;
$scope.desc = !$scope.desc;
};


//删除
$scope.deleteall = function() {

$scope.users.splice($scope.users);
};


$scope.ageTest = function(age, ageSize) {


if(ageSize != "--年龄范围查询--") {
var ages = ageSize.split("~");
var ageMin = ages[0];
var ageMax = ages[1];
if(age < ageMin || age > ageMax) {
return false;
} else {
return true;
}
} else {
return true;
}


};


//批量删除
$scope.deleteSel = function() {
var userNames = [];
//遍历users数组，获取状态是选中的user对象的名字
for(index in $scope.users) {
if($scope.users[index].state == true) {
userNames.push($scope.users[index].name);
}
}


if(userNames.length > 0) {
if(confirm("是否删除选中项？")) {
for(i in userNames) {
var name = userNames[i];
for(i2 in $scope.users) {
if($scope.users[i2].name == name) {
$scope.users.splice(i2, 1);
}
}
}
}
} else {
alert("请选择删除项");
}
}


//全选 反选
$scope.selectAll = false;
$scope.all = function(m) {
for(var i = 0; i < $scope.users.length; i++) {
if(m === true) {
$scope.users[i].state = true;
} else {
$scope.users[i].state = false;
}
}
};
           });
</script>


</head>


<body ng-app="myApp" ng-controller="myCtrl">
<center>
<form>
<table border="1" style="text-align: center;" width="600" cellpadding="5" cellspacing="0">
<tr>
<th colspan="3">
<input type="text" ng-model="key" placeholder="请输入姓名关键字" />
</th>
<th>
<select ng-model="ageSize" ng-init="ageSize ='--年龄范围查询--'">
<option>--年龄范围查询--</option>
<option>10~20</option>
<option>21~30</option>
<option>31~100</option>
</select>
</th>
<th>
<select ng-model="setSex">
<option value="">--性别--</option>
<option>男</option>
<option>女</option>
</select>
</th>
<th>
<input type="button" value="全部删除" ng-click="deleteall()" />
                            <input ng-click="deleteSel()" type="button" value="批量删除" />
</th>

</tr>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)" /></th>
<th ng-click="myorderBy('id')">id</th>
<th ng-click="myorderBy('name')">用户名</th>
<th ng-click="myorderBy('pwd')">密码</th>
<th ng-click="myorderBy('age')">年龄</th>
<th ng-click="myorderBy('sex)">性别</th>
</tr>

<tr ng-repeat="u in users  | filter:setSex |filter: {name: key} | orderBy: title : desc" ng-if="ageTest(u.age,ageSize)">
<td><input ng-model="u.state" type="checkbox" ng-checked="selectAll" /></td>
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>{{u.pwd}}</td>
<td>{{u.age}}</td>
<td>{{u.sex}}</td>
                    </tr>
</table>


</form>


</center>


</body>


</html>

GLqueen110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学生管理反选删除

var app = angular.module("myApp", []);//主控制器app.controller("myCtrl", function($scope) {$scope.users = [{id: 1,name: "a",pwd: "111",age: 12,sex: "男",state: false},{id: 2,n
复制链接

扫一扫