简单的过滤器模糊查询方法

来源：互联网发布：穿越小说改编的网络剧编辑：程序博客网时间：2024/04/29 15:31

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>用户信息：奇偶数隔行变色，选中行变色，鼠标变小手样式；姓名查询条件，过滤敏感字符；下拉列表排序；非空验证添加信息；点击按钮删除</title>
<script src="angular-1.5.5/angular.js"></script>
<style type="text/css">
.first {
background-color: darkgrey;
}

.tr_odd {
background-color: orange;
}

.tr_even {
background-color: aqua;
}

.mouse_color {
background-color: green;
}
#tab {
border: 1px #FF0000 solid;
text-align: center;
}

tbody tr {
background: #d0d0d0;
}

tbody tr:nth-child(2n) {
background: #ffffff;
}
tbody tr:hover{background: red;}
</style>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$filter) {
$scope.users = [{
name: "张三",
age: 20,
pin: "zhang san",
zhi: "总经理"
},
{
name: "李四",
age: 18,
pin: "li si",
zhi: "设计师"
},
{
name: "王五",
age: 45,
pin: "wang wu",
zhi: "工程师"
},
{
name: "赵六",
age: 33,
pin: "zhao liu",
zhi: "工程师"
},
{
name: "周七",
age: 32,
pin: "zhou qi",
zhi: "人事经理"
}
];

//1. 实现姓名查询条件框5分，实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”5分；
// 实现按姓名搜索表格内容功能5分，当搜索内容未找到匹配项时提示”未找到内容”5分，当搜索内容有敏感词时，alert提示
//过滤敏感字符：枪法轮功
$scope.xun = "";
$scope.select = function() {
/*$(function() {
var searchName = $("input:eq(0)").val();*/
//实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”
if($scope.searchText == "" || $scope.searchText == undefined) {
alert("请输入姓名");
} else {
//当搜索内容有敏感词时，alert提示
if($scope.searchText == "枪" || $scope.searchText == "法轮功") {
alert("输入内容含有敏感字符！");
$scope.searchText = "";
} else {

var arr = $filter("filter")($scope.users,{"name":$scope.searchText});
if(arr!= 0) {
$scope.xun = $scope.searchText;
} else {
alert("未找到内容！");
}
// //实现按姓名搜索表格内容功能5分，当搜索内容未找到匹配项时提示”未找到内容”
// var flag = false;
// for(index in $scope.users) {
// if(searchName == $scope.users[index].name) {
//
// $scope.users.push(aa);
// flag = true;
//
// }
//
// }
// if(flag) {
// alert("已找到内容");
// } else {
// alert("未找到内容！");
// }
// }
}
}
}

//2.实现排序下拉列表展示5分，实现按照年龄倒序排序5分，实现按照年龄正序排序
$scope.order = "age";

//3. 实现用户添加页，按要求实现内容添加5分，实现添加内容时的校验，当年龄不为数字时alert提示用户”年龄格式错误”功能5分，实现添加用户信息到列表中
$scope.show = false;
$scope.add = function() {
$scope.show = true;
}
$scope.name = "";
$scope.age = "";
$scope.pin = "";
$scope.zhi = "";
//点击添加用户信息的按钮,验证非空情况后，再添加
$scope.sub = function() {
$scope.flag1 = false;
$scope.flag2 = false;
$scope.flag3 = false;
$scope.flag4 = false;

//姓名非空
if($scope.name == null || $scope.name == "") {
alert("姓名不得为空！");
return false;
} else {
$scope.flag1 = true;
}

//当年龄不为数字时alert提示用户”年龄格式错误”功能
if($scope.age == "" || $scope.age == null) {
alert("年龄不能为空！");
return false;
} else if(isNaN($scope.age)) {
alert("年龄格式错误！");
return false;
} else {
$scope.flag2 = true;
}

//姓名拼音
if($scope.pin == null || $scope.pin == "") {
alert("姓名拼音不得为空！");
return false;
} else {
$scope.flag3 = true;
}

//职位判断
if($scope.zhi == "" || $scope.zhi == null) {
alert("职位不能为空！");
return false;
} else if(isNaN($scope.zhi) == false) {
alert("职位不能为数字！");
return false;
} else {
$scope.flag4 = true;
}

//符合条件后再提交添加
if($scope.flag1 == true && $scope.flag2 == true && $scope.flag3 == true && $scope.flag4 == true) {
//添加成功后清空信息
var inputs = document.getElementsByTagName("input");
for(i = 0; i < inputs.length; i++) {
inputs.item(i).value = "";
}

//设置新数据
var newUser = {
name: $scope.name,
age: parseInt($scope.age),
pin: $scope.pin,
zhi: $scope.zhi
}
//添加新用户
$scope.users.push(newUser);
$scope.show = false;
} else {
return false;
}
}

//4. 实现点击删除时弹出二次确认询问框5分，实现删除功能，删除后从列表中消失5分。注：询问框可使用js的confirm实现
$scope.remove = function(selectName) {
if(confirm("您是否要将该用户从列表中删除？")) {
//根据列名删除数据，首先根据所在下标遍历所有内容
for(index in $scope.users) {
if($scope.users[index].name == selectName) {
//使用js中的删除方法，每次删除的项目数量为1行
$scope.users.splice(index, 1);
}
}
}
}
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
<h5>用户列表</h5> 姓名查询条件
<input id="searchText" ng-model="searchText" >       
<select ng-model="order">
<option value="-age">按年龄倒序</option>
<option value="age">按年龄正序</option>
<option value="-name">按姓名倒序</option>
<option value="name">按姓名正序</option>
</select>
</div> <br>

<table id="tab" cellspacing="0" cellpadding="20" border="1 solid black">
<thead align="left">
<tr style="background: goldenrod;">
<th>姓名</th>
<th>年龄</th>
<th>拼音</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | orderBy:order |filter:{name:xun}">
<td pinyin="name">{{user.name}}</td>
<td pinyin="age">{{user.age}}</td>
<td pinyin="pin">{{user.pin}}</td>
<td pinyin="zhi">{{user.zhi}}</td>

<td>
<a ng-click="remove(user.name)">
<div style="cursor:pointer;">删除</div>
</a>
</td>
</tr>
</tbody>
</table> <br>
<div>
<button ng-click="select()">查询</button>       
<button ng-click="add()">添加用户</button>
</div>


<div ng-show="show">
<h5>添加用户信息</h5>
<table cellspacing="0" cellpadding="12" border="1 solid black">
<tr>
<th>姓名</th>
<td><input type="text" ng-model="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<th>年龄</th>
<td><input type="text" ng-model="age" placeholder="请输入年龄"></td>
</tr>
<tr>
<th>拼音</th>
<td><input type="text" ng-model="pin" placeholder="请输入拼音"></td>
</tr>
<tr>
<th>职位</th>
<td><input type="text" ng-model="zhi" placeholder="请输入职位"></td>
</tr>
<tr align="center">
<td colspan="2"><button ng-click="sub()">保存</button></td>
</tr>
</table>
</div>
</center>
</body>

</html>

阅读全文

0 0