angularjs查询删除过滤敏感信息

最新推荐文章于 2022-07-01 15:21:30 发布

流鑫星的光

最新推荐文章于 2022-07-01 15:21:30 发布

阅读量231

点赞数

分类专栏： IT

本文链接：https://blog.csdn.net/gongyaqi/article/details/78612370

版权

IT 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
thead tr{background:#424242;}
tbody tr:nth-child(odd){background:#778899;}
tbody tr:nth-child(even){background:#A4D3EE;}
tbody tr:hover{background:#33FFFF ;}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.filter("mybut",function(){
return function(input){return input.replace(/cao/g,alert("对不起你输入的有敏感词汇"));}
});

app.controller("myteys",["$scope","$filter",function($scope,$filter){
$scope.detes=[{"sid":1,"name":"张三","age":45,"pin":"zhang san","zhi":"总经理"},{"sid":2,"name":"李四","age":43,"pin":"li si","zhi":"设计师"},{"sid":3,"name":"王五","age":40,"pin":"wang wu","zhi":"工程师"},{"sid":4,"name":"赵六","age":33,"pin":"zhao liu","zhi":"工程师"},{"sid":5,"name":"周七","age":32,"pin":"zhou qi","zhi":"人事经理"}]; $scope.dete=[];
$scope.dete=$scope.detes;
$scope.ages="按年龄倒序";
$scope.cha=function(){
/*2.实现姓名查询条件框5分，实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”5分，实现按姓名搜索表格内容功能5分，当搜索内容未找到匹配项时提示”未找到内容”5分，*/
var f=$filter("filter");
if($scope.sname.match("cao")!=null){
var f1=$filter("mybut");
$scope.sname=f1($scope.sname,$scope.sname);
}else{
if($scope.sname!=null&&$scope.sname!=""){
$scope.dete=[];
$scope.dete=f($scope.detes,{name:$scope.sname});
if($scope.dete.length==0){
alert("未找到内容");
$scope.dete=[];
$scope.dete=$scope.detes;
}
}else{
alert("请输入姓名");
}
}
};
/*实现排序下拉列表展示5分，实现按照年龄倒序排序5分，实现按照年龄正序排序5分*/
$scope.pai=function(){
var f=$filter("orderBy");
if($scope.ages=="按年龄倒序"){
$scope.dete=[];
$scope.dete=f($scope.detes,"age",false);
}else{
$scope.dete=[];
$scope.dete=f($scope.detes,"age",true);
}
};
/*5.实现列表页面布局整洁5分，6. 实现点击删除时弹出二次确认询问框5分，实现删除功能，删除后从列表中消失5分。注：询问框可使用js的confirm实现*/
$scope.shan=function(na){
for(var i=0;i<$scope.detes.length;i++){
if($scope.detes[i].sid==na.sid){
var su=confirm("是否删除数据");
if(su==true){
$scope.detes.splice(i,1);
alert("删除成功");
}
}
}
$scope.dete=[];
$scope.dete=$scope.detes;
};
$scope.st=0;
$scope.tian=function(){
$scope.st=1;
}
$scope.bao=function(){
if($scope.cage!=null&&$scope.cage!=""&&$scope.cname!=null&&$scope.cname!=""&&$scope.czhi!=null&&$scope.czhi!=""&&$scope.cpin!=null&&$scope.cpin!=""){
var s=parseInt($scope.cage);
if(isNaN(s)){alert("格式不正确");}
else{
$scope.detes.push({name:$scope.cname,age:$scope.cage,pin:$scope.cpin,zhi:$scope.czhi});
$scope.dete=[];
$scope.dete=$scope.detes;
$scope.st=0;
}
}else{alert("条件不满足");}
};
}]);
</script>
</head>
<body ng-app="myapp" ng-controller="myteys">

姓名查询条件<input type="text" ng-model="sname" />
<select ng-model="ages" ng-click="pai()">
<option>按年龄倒序</option>
<option>按年龄正序</option>
</select>
<h5>用户列表</h5>
<table border="1px" cellpadding="0" cellspacing="0" style="width: 500px;">
<thead>
<tr>
<td>姓名</td><td>年龄</td><td>拼音</td><td>职位</td><td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat=" na in dete">
<td>{{na.name}}</td><td>{{na.age}}</td><td>{{na.pin}}</td><td>{{na.zhi}}</td>
<td><a href="#" style="text-decoration: none; color: black;" ng-click="shan(na)">删除</a></td>
</tr>
</tbody>
</table>
<button ng-click="cha()">查询</button> <button ng-click="tian()">添加</button>
<div ng-hide="st==0" style="border: solid 1px black;margin-top: 50px; height: 150px;">
<div style="margin-top: -10px;">添加用户信息</div><br />
<span style="width: 50px;">姓名</span><input type="text" ng-model="cname"/><br/>
<span style="width: 50px;">年龄</span><input type="text" ng-model="cage"/><br/>
<span style="width: 50px;">拼音</span><input type="text" ng-model="cpin"/><br/>
<span style="width: 50px;">职务</span><input type="text" ng-model="czhi"/><br/>
<button ng-click="bao()">保存</button>
</div>
</body>
</html>

流鑫星的光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs查询删除过滤敏感信息

thead tr{background:#424242;}tbody tr:nth-child(odd){background:#778899;}tbody tr:nth-child(even){background:#A4D3EE;}tbody tr:hover{background:#33FFFF ;}var app=angular.module("myapp",[
复制链接

扫一扫