angularJS实现查询/选择排序/添加/敏感字符过滤
2017-10-23 15:18
591 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>weicy</title>
<script src="angular.js"></script>
<style>
#tj{
background-color: #0c60ee;
}
</style>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.users = [{
name:"张三",
wz:"123",
qh:11,
ps:999
},{
name:"李四",
wz:"456",
qh:21,
ps:888
},{
name:"王五",
wz:"789",
qh:23,
ps:777
},{
name:"赵六",
wz:"1122",
qh:10,
ps:666
},{
name:"田七",
wz:"3344",
qh:1,
ps:555
}];
//设置添加用户类表的显示隐藏
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
//添加用户
$scope.tianjia = function (tjname,tjwz,tjqh,tjps) {
var flag = true;
if (tjname=="" || tjname == null){
alert("添加名称必填项")
}else {
for (i in $scope.users){
if ($scope.users[i].name == tjname){
alert("用户已存在");
flag = false;
}
}
if (flag){
$scope.users.push({
name:tjname,
wz:tjwz,
qh:tjqh,
ps:tjps,
});
}
}
}
//选择排序方式
$scope.size1 = "--请选择--";
$scope.sexSize = function(qh,size1){
if(size1 == "--请选择--"){
return true;
}else{
}
}
//敏感字符过滤
$scope.yhm="";
$scope.search2="";
$scope.$watch("yhm",function(value){
console.log(value);
if(value.indexOf("枪")!=-1){
alert("包含敏感字");
$scope.yhm="";
}else{
$scope.search2=$scope.yhm;
}
});
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<table border="0" width="600px">
<tr>
<td>查询</td>
<td></td>
<td>排序</td>
</tr>
<tr>
<td colspan="2">
<input type="text" placeholder="姓名查询" ng-model="yhm">
</td>
<td colspan="2">
<select ng-model="order">
<option value="">--请选择排序顺序--</option>
<option value="ps">正序</option>
<option value="-ps">倒序</option>
</select>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td colspan="4">
<button id="tj" ng-click="toggle()">新加人员</button>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<table border="1" width="600px" cellpadding="10" cellspacing="0">
<tr>
<th>姓名</th>
<th>密码</th>
<th>卡号</th>
<th>卡数</th>
</tr>
<tr ng-repeat="user in users | filter:{name:search2} | orderBy: order" ng-show="sexSize(user.ps,size1)">
<td>{{user.name}}</td>
<td>{{user.wz}}</td>
<td>{{user.qh}}</td>
<td>{{user.ps}}</td>
</tr>
</table><br><br>
<table ng-if="myVar" border="1 solid blue" cellpadding="10" cellspacing="0">
<tr>
<th>姓名</th>
<td><input type="text" ng-model="tjname"></td>
</tr>
<tr>
<th>位置</th>
<td><input type="text" ng-model="tjwz"></td>
</tr>
<tr>
<th>卡号</th>
<td><input type="text" ng-model="tjqh"></td>
</tr>
<tr>
<th>卡数</th>
<td><input type="text" ng-model="tjps"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button ng-click="tianjia(tjname,tjwz,tjqh,tjps)">添加</button>
</td>
</tr>
</table>
</center>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS实现下拉框排序/添加数据/查询数据/敏感字符过滤
- AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
- angularjs-添加数据,姓名查询,过滤敏感字符,下拉菜单查询
- 3：AngularJS：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- AngularJS_table添加/批量删除数据/过滤敏感字符
- （angularjs） 数据的增查（添加用户，查询名字，实现排序，判断非空 ，是否是数字，是否重名，敏感字符）
- 2. AngularJs+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- Filter高级开发(二)——实现敏感字符过滤功能
- 隔行变色，选中变色，鼠标变小手样式；姓名查询条件 过滤敏感字符 下拉列表排序 非空验证添加信息 点击按钮删除
- AngularJS敏感字符过滤代码案例
- 自定义标签实现过滤敏感字符
- AngularJS实现存入文本,搜索文本,敏感字符
- Bootstrap + AngularJS 实现简单的数据过滤----字符查找
- AngularJs+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- AngularJS实现存入文本,搜索,敏感字符
- angularjs过滤敏感字符
- Filter高级开发(二)——实现敏感字符过滤功能
- AngularJS敏感词过滤,下拉菜单排序,表格隔行换色,添加数据
- 添加用户+非空判断+整数判断+敏感字符过滤+排序+奇数行变颜色
- angularjs过滤敏感字符