AngularJS 添加查询排序删除数据敏感词

最新推荐文章于 2019-08-24 17:25:33 发布

熊猫猫猫_xback

最新推荐文章于 2019-08-24 17:25:33 发布

阅读量155

点赞数 1

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0 auto;
padding: 0px;
}
#big{
width: 600px;
height: 500px;
margin-top: 50px;
}
a{
text-decoration: none;
}

tr:nth-of-type(even){
background-color: #eeeeee;
}
tr:nth-of-type(odd){
background: white;
}

tr:nth-of-type(odd):hover{
background-color: #41c7d8;
}
tr:nth-of-type(even):hover{
background-color: #41c7d8;
}
</style>
</head>

<body ng-app="myapp" ng-controller="myctrl">
<div id="big">
<h3>用户列表</h1>
姓名查找条件<input type="text" ng-model="name" />
      

<select ng-change="change()" ng-model="age" ng-init="age=ages[0]">
<option ng-repeat="x in ages">{{x}}</option>
</select>

<table border="1px" width="400px" >
<tr style="background-color: #999999;">
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr ng-repeat="person in persons">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td><a href="#" ng-click="dele($index)">删除</a></td>
</tr>
</table>
<input type="button" value="查询" ng-click="cha()" />
<input type="button" value="添加" ng-click="xianshi()"/>
<hr />
<fieldset ng-show="xs">
<legend>添加用户信息</legend>
姓名:<input type="text" ng-model="name1"/><br>
年龄:<input type="text" ng-model="age1"/><br>
<input type="button" value="保存" ng-click="add()"/>
</fieldset>
</div>
<script type="text/javascript">
var mo=angular.module("myapp",[])
mo.controller("myctrl",function ($scope) {

//默认数据
$scope.ages = ["按年龄正序", "按年龄倒序"];
var persons_temp=[
{"name":"张三","age":18},
{"name":"李四","age":25},
{"name":"王二","age":20},
{"name":"赵六","age":50}];

//赋值
$scope.persons=persons_temp;
//排序
$scope.change=function () {
var ag=$scope.age;
if (ag=="按年龄正序") {
persons_temp.sort(function (a,b) {
return a.age-b.age;
})
} else{
persons_temp.sort(function (a,b) {
return b.age-a.age;
})
}
//重新赋值
$scope.persons=persons_temp;
}

//查询
$scope.cha = function() {
// $scope.persons = [{"name":"张三","age":18},
// {"name":"李四","age":25},
// {"name":"王二","age":20},
// {"name":"赵六","age":50}];
//
var newPersons = [];
var n=$scope.name;
if (n=="") {
alert("姓名不能为空")
return;
}
//敏感词
if (n.indexOf("妈的")!=-1) {
alert("含有敏感词")
$scope.name=""
return
}
for (var i=0;i<persons_temp.length;i++) {
var n1=persons_temp[i].name;
if (n1.indexOf(n)!=-1) {
newPersons.push(persons_temp[i]);
}
// if (n==$scope.persons_temp[i].name) {
// newPersons.push($scope.persons_temp[i]);
// }
}
//判断
if (newPersons.length == 0) {
alert("没有匹配项");
return;
}
$scope.persons = newPersons;

}

//删除
$scope.dele=function($index) {
var result=confirm("确定要删除吗？")
if (result) {
persons_temp.splice($index,1);
$scope.persons = newpersons;
return false;
} else{
//do nothing
}

}

//显示/隐藏
$scope.xianshi=function () {
$scope.xs=true;
}

//添加保存
$scope.add=function () {
if (isNaN($scope.age1)) {
alert("年龄格式错误");
$scope.age1=""
return;
}
var obj={"name":$scope.name1,"age":$scope.age1}
persons_temp.push(obj);

$scope.persons = persons_temp;

//添加完毕清空输入框隐藏
$scope.name1=""
$scope.age1=""

$scope.xs=false
}
})
</script>
</body>
</html>

熊猫猫猫_xback

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 添加查询排序删除数据敏感词

*{margin: 0 auto;padding: 0px;}#big{width: 600px;height: 500px;margin-top: 50px;}a{text-decoration: none;}tr:nth-of-type(even){background-color: #eeeeee;}tr:nth-of-type
复制链接

扫一扫