模拟月+全选+批量

最新推荐文章于 2023-10-30 11:46:27 发布

Xin_zang

最新推荐文章于 2023-10-30 11:46:27 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/Xin_zang/article/details/79078016

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>

<style>

table tr:nth-child(even){
background-color: beige;
}
table tr:nth-child(odd){
background-color: bisque;
}
</style>
<script>
var app = angular.module("myapp",[]);
app.controller("myCtrl",function($scope,$http){

$scope.shuju = "";

$http({
method:"get",
url:"http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid"
}).then(function success(response){

$scope.shuju = response.data;

},function error(response){

});

$scope.tu1 = true;
$scope.tu2 = false;

//删除
$scope.shan = function($index){
for (var i=0 ; i<$scope.shuju.length ; i++) {
if($scope.shuju[i].name == $index){
if(confirm("是否删除")){
$scope.shuju.splice(i,1);
alert("确认删除");
if($scope.shuju.length == 0){
$scope.tu1 = false;
$scope.tu2 = true;
}
}

}
}
}

//批量删除

ff=false;
$scope.dianji = function($index){
$scope.shuju[$index].ff=!$scope.shuju[$index].ff;

}

//批量删除
$scope.deleteMore = function(){

//全选
var a = $scope.qx;
if(a){
for (var i =$scope.shuju.length-1; i>=0; i--) {
$scope.shuju.splice(i,1);
if($scope.shuju.length == 0){
$scope.tu1 = false;
$scope.tu2 = true;
}
}
}

//批量
for (var i =$scope.shuju.length-1; i>=0; i--) {
if($scope.shuju[i].ff){
$scope.shuju.splice(i,1);
if($scope.shuju.length == 0){
$scope.tu1 = false;
$scope.tu2 = true;
}
}
}

}

});
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">

<div ng-show="tu1">

<input type="text" placeholder="根据姓名模糊查询.." ng-model="cha1" />

<input type="text" placeholder="根据部门模糊查询.." ng-model="cha2" />

<select ng-model="pai">

<option value="birthday" >根据年龄升序</option>
<option value="-birthday">根据年龄降序</option>
<option value="salary">根据薪资升序</option>
<option value="-salary">根据薪资降序</option>
<option value="" >--1111--</option>
</select>

<input type="button" value="批量删除" ng-click="deleteMore();" /><br />

<table border="1" width="600px">

<tr>
<th>
<input type="checkbox" ng-model="qx" ng-click="sell()" />
</th>

<th>员工姓名</th>
<th>员工年龄</th>
<th>员工性别</th>
<th>员工薪资</th>
<th>出生日期</th>
<th>部门名称</th>
<th>删除</th>
</tr>

<tr ng-repeat="s in shuju | orderBy:pai | filter:{name:cha1 , name:cha2}">
<td>
<input type="checkbox" ng-click="dianji($index)" ng-checked="qx" />
</td>
<td>{{s.name}}</td>
<td>{{s.id}}</td>
<td>{{s.gender}}</td>
<td>{{s.salary | currency:"￥"}}</td>
<td>{{s.birthday | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td>{{s.department.name}}</td>
<td>
<input type="button" value="删除" ng-click="shan(s.name)" />
</td>
</tr>
</table>
</div>

<div ng-show="tu2">
<h1>无操作数据</h1>
</div>

</body>
</html>