AngularJS:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
来源:互联网 发布:数据通讯设备 编辑:程序博客网 时间:2024/06/06 03:25
<!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>
<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
- 2. AngularJs+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- 3:AngularJS:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- AngularJS:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- 1. AngularJS+路由+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息(路由显示添加页面)
- AngularJS:模糊查询过滤内容,验证判断后添加表格信息
- angularjs-添加数据,姓名查询,过滤敏感字符,下拉菜单查询
- AngularJS敏感词过滤,下拉菜单排序,表格隔行换色,添加数据
- AngularJS实现下拉框排序/添加数据/查询数据/敏感字符过滤
- angularJS实现查询/选择排序/添加/敏感字符过滤
- 隔行变色,选中变色,鼠标变小手样式;姓名查询条件 过滤敏感字符 下拉列表排序 非空验证添加信息 点击按钮删除
- 查询+下拉菜单排序+增加+敏感词过滤+判断姓名是否存在
- angularjs过滤敏感字符
- angularjs过滤敏感字符
- angularjs查询删除 过滤敏感信息
- 用户信息:奇偶数隔行变色,选中行变色,鼠标变小手样式;姓名查询条件,过滤敏感字符;下拉列表排序;非空验证添加信息;点击按钮删除
- 添加用户+非空判断+整数判断+敏感字符过滤+排序+奇数行变颜色
- html angular+route:模糊查询+下拉排序+新增内容+判断是否重复+输入敏感字提示
- 商品订单(增删改查):新增订单;批量删除,发货;模糊查询,下拉菜单内容过滤(含时间);全选反选,列名排序
- banner轮播图的使用
- Java 之 整型比较
- Linux环境下MyCAT安装
- 隔行换色----------------------分割线-----------------------
- C#数组、List和ArrayList的区别
- AngularJS:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- 购物车加减
- 商品库存管理系统
- zcash零币最新资讯!
- C# Socket简单例子(服务器与客户端通信)
- 46. Permutations
- spring-cloud系列-Eureka
- 通过接口直接映射sql语句(xml)---里面含有一个重要的知识点--(selectKey)
- OKHTTP的单例封装与自定义拦截器