anglarJS删除+批量删除+模糊查询+全选反选+排序

最新推荐文章于 2021-04-28 19:21:39 发布

沉迷学习一一无法自拔

最新推荐文章于 2021-04-28 19:21:39 发布

阅读量312

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/tangxueqin/article/details/79085884

HTML5 专栏收录该内容

9 篇文章

订阅专栏

这个示例展示了如何在 AngularJS 应用中实现数据的删除、批量删除、模糊查询、全选反选以及排序功能。通过控制器处理HTTP请求获取数据，使用ng-repeat进行数据绑定，并提供了自定义过滤器用于部门的模糊查询。用户还可以新增数据并进行验证，添加的数据将即时更新到表格中。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table tr:nth-child(odd) {
background: #F4F4F4;
}
</style>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script>
var app = angular.module("tangapp", []);
app.controller("demo", function($scope, $http) {
$scope.sex='男';
//获取网络数据
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.then(function(d) {
$scope.datas = d.data;
});

//年龄
$scope.getAge = function(d) {
var dr = new Date(d).getYear(); //出生的年
var dq = new Date().getYear(); //当前年份
return dq - dr;

}
//全选反选
$scope.ckAll = function() {
for(var i = 0; i < $scope.datas.length; i++) {
$scope.datas[i].ck = $scope.flag;
}
}
//批量删除
$scope.delAll = function() {
var count = 0;
//遍历数组
for(var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].ck) {
count++;
$scope.datas.splice(i, 1);
i--;
}

}
if(count == 0) {
alert("请选择");
}
}

//删除

$scope.del = function(id) { //js删除只能根据索引删除
//根据id查找id所对应索引
var index = 0;
for(var i in $scope.datas) {
if($scope.datas[i].id == id) {
index = i;
}
}

//弹框确认是否删除
var f = confirm("确定删除吗?");
if(f) {
$scope.datas.splice(index, 1);
}
}
//部门模糊查询
$scope.xsbm = function(bm) {
if($scope.ssname == undefined || $scope.ssname == "") {
return true;
}

if(bm.indexOf($scope.ssname) > -1) {
return true;
}
return false;
}
//添加后保存
$scope.bc = function() {
//存放错误信息的数组
$scope.errors = [];
//姓名
if($scope.add_name == undefined || $scope.add_name == "") {
$scope.val_uname = true;
$scope.errors.push(1);
} else {
$scope.val_uname = false;

}
//薪水
if($scope.add_salar == undefined || $scope.add_salar == "") {
$scope.val_salar = true;
$scope.errors.push(2);
} else {
$scope.val_salar = false;

}
//日期
if($scope.add_data == undefined || $scope.add_data == "") {
$scope.val_data = true;
$scope.errors.push(4);
} else {
$scope.val_data = false;

}
//部门id改变
var obj_d; //部门对象
if($scope.add_bm==undefined||$scope.add_bm==""){
$scope.errors.push(5);
}else{
/*判断部门所在对象,组装对象 */
if($scope.add_bm=="市场部"){
obj_d={id:1,name:$scope.add_bm};
}else if($scope.add_bm=="研发部"){
obj_d={id:2,name:$scope.add_bm};
}
}
//添加数据
if($scope.errors.length == 0) {
$scope.datas.push({
"salary":$scope. add_salar,
"birthday":$scope.add_data.valueOf(),
"department":obj_d,
"gender":$scope.sex,
"id": $scope.datas.length+100,
"name":$scope.add_name

});
//隐藏添加的div
$scope.xs=false;
console.log($scope.datas);

}

}

})
</script>
</head>

<body ng-app="tangapp" ng-controller="demo">
<h1 ng-show="datas.length==0">页面无法操作</h1>
<div ng-show="datas.length>0">
<input placeholder="根据姓名模糊查询" type="text" ng-model="sname" style="border-radius:10px;" />
<input placeholder="根据部门模糊查询" type="text" ng-model="ssname" style="border-radius:10px;" />
<select ng-model="px">
<option value="">根据薪资排序</option>
<option value="-salary">从高到低</option>
<option value="+salary">从低到高</option>

</select>

<button ng-click="delAll()">批量删除</button>
<button ng-click="xs=true">添加</button>
<table border="1">
<tr style="background: slategrey;">
<td><input type="checkbox" ng-click="ckAll()" ng-model="flag" /> </td>

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

<tr ng-repeat="d in datas|orderBy:'+birthday'|filter:{name:sname}|orderBy:px" ng-show="xsbm(d.department.name)">
<td><input type="checkbox" ng-model="d.ck" /> </td>
<td>{{d.name}}</td>
<td>{{getAge(d.birthday)}}</td>
<td>{{d.gender}}</td>
<td>{{d.salary|currency:"￥："}}</td>
<td>{{d.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{d.department.name}}</td>
<td><button ng-click="del(d.id)">删除</button></td>

</tr>
</table>
<div ng-show="xs">
用户名：<input placeholder="请输入用户名" ng-model="add_name" /><span ng-show="val_uname">用户名不合法</span> <br /> 薪水：
<input placeholder="请输入薪资" ng-model="add_salar" /><span ng-show="val_salar">薪资不合法</span> <br /> 性别：
<input type="radio" ng-model="sex" value="男" />男
<input type="radio" ng-model="sex" value="女" />女<br /> 日期：
<input type="date" ng-model="add_data" /><span ng-show="val_data">日期不合法</span> <br /> 部门名称：
<select ng-model="add_bm">
<option value="">请选择部门</option>
<option value="研发部">研发部</option>
<option value="市场部">市场部</option>

</select><br />
<button ng-click="bc()">保存</button>
</div>
</div>
</body>

</html>