查询+下拉菜单排序+增加+敏感词过滤+判断姓名是否存在

来源：互联网发布：李成儒饰演淘宝电视剧编辑：程序博客网时间：2024/06/07 06:16

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*奇数*/
.even{
background-color: lavender;
}
/*偶数*/
.odd{
background-color: aliceblue;
}
.first{
background-color: darkgrey;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>

<script>
$(function(){
$("tbody tr:even").addClass("even");
$("tbody tr:odd").addClass("odd");
$("thead tr:first").addClass("first");
});
</script>
<script>
var app=angular.module("myApp",['ngRoute']);
//路由
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/addShuzu",{
controller:"addShuzuCtrl",
templateUrl:"addShuzu.html"
})
.otherwise({redirectTo:"/addShuzu"});

}]);

//自定义过滤器 app.filter("myFilter",function(){ return function(text){ if(text.indexOf("敏感字符")>=0){ //替换字符串 return text.replace(/敏感字符/g,"****"); }else{ return text; } } });

//主控制器
app.controller("myCtrl",function($scope){
$scope.piaonum=""
$scope.shuzu=[{
"name":"张三",
"address":"控球后卫",
"numbe":11,
"piaonum":999
},{
"name":"李四",
"address":"大前锋",
"numbe":21,
"piaonum":888
},{
"name":"王五",
"address":"小前锋",
"numbe":23,
"piaonum":777
}];
$scope.order="-piaonum";
});
//添加用户
app.controller("addShuzuCtrl",function($scope){
$scope.name="";
$scope.address="";
$scope.numbe="";
$scope.piaonum="";
$scope.sub=function(){
//判断用户
var flag1=flag2=flag3=flag4=false;
if($scope.name==null||$scope.name==""){
alert("用户名不为空");
flag1=false;
}else {
var flag=true;
for(newShuzu in $scope.shuzu){
   if($scope.shuzu[newShuzu].name==$scope.name){
  alert("已存在球员判重");
  flag1=false;
  flag=false;
   }
}
if(flag){
flag1=true;
}else{

}
}
if($scope.address==null||$scope.address==""){
alert("位置不为空");
flag2=false;
}else {
flag2=true;
}
if($scope.numbe==null||$scope.numbe==""){
alert("球号不为空");
flag3=false;
}else {
flag3=true;
}
if($scope.piaonum==null||$scope.piaonum==""){
alert("票数不为空");
flag4=false;
}else {
flag4=true;
}
//判断添加用户
if(flag1&&flag2&&flag3&&flag4){
//如果都为true输入框都不为空，添加用户
var newShuzu={
id:$scope.shuzu.length+1,
name:$scope.name,
address:$scope.address,
numbe:$scope.numbe,
piaonum:parseInt($scope.piaonum)
}
//将用户添加数据源
$scope.shuzu.push(newShuzu);
};

}

});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
查询
<input type="text" ng-model="na" ng-model="value"/>
排序
<select ng-model="order" >
<option value="-piaonum">票数倒序</option>
<option value="piaonum">票数正序</option>
<option value="-numbe">球号倒序</option>
<option value="numbe">球号正序</option>
</select>
</div>
<button style="background-color: aqua;" class="addShuzu" ng-click="goToUrl('/addShuzu')">新增球员</button>
<table width="500" border="1" cellspacing="0" cellpadding="30">
<thead>
<tr>
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in shuzu|filter:{name:na} | orderBy:order">
<td>{{x.name}}</td>
<td>{{x.address}}</td>
<td>{{x.numbe}}</td>
<td>{{x.piaonum}}</td>
</tr>
</tbody>
</table>
<script type="text/ng-template" id="addShuzu.html">
<form action="#">
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>姓名</th>
<td><input id="newname" ng-model="name" type="text" placeholder="请输入姓名"/></td>
</tr>
<tr>
<th>位置</th>
<td><input ng-model="address" type="text" placeholder="请输入位置"/></td>
</tr>
<tr>
<th>球号</th>
<td><input ng-model="numbe" type="text" placeholder="请输入球号"/></td>
</tr>
<tr>
<th>票数</th>
<td><input ng-model="piaonum" type="text" placeholder="请输入票数"/></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>
</tr>
</table>
</form>
</script>
<div ng-view></div>
</center>
</body>

</html>

阅读全文

0 0