球员题的查询+添加+排序代码实现（效果如图）
程序员文章站
2022-03-18 12:52:40
球员题的查询+添加+排序代码实现（效果如图）
球员题的查询+添加+排序代码实现（效果如图）
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>3：angularjs：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息</title>
<style>
*{
margin: auto;
padding: 0;
}
body{
text-align: center;
margin: 50px auto;
}
table
{
margin-top: 30px;
}
.btn
{
background: cornflowerblue;
width: 100px;
height: 50px;
}
tr:nth-child(2n){
background: #666;
}
</style>
<script type="text/javascript" src="../anglert/angular.min.js" ></script>
<script>
//主模板
var myapp=angular.module("myapp",[]);
//控制器
myapp.controller("myctrl",function ($scope) {
$scope.data=[
{name:"张三",wei:"控球后卫",hao:"11",piao:"999"},
{name:"李四",wei:"大前锋",hao:"21",piao:"888"},
{name:"王五",wei:"小前锋",hao:"23",piao:"777"},
{name:"赵六",wei:"中锋",hao:"10",piao:"666"},
{name:"周七",wei:"得分后卫",hao:"1",piao:"555"},
]
$scope.name="";
$scope.search2="";
$scope.$watch("name",function (value) {
if(value.indexof("枪")!=-1)
{
alert("输入内容含有敏感字");
$scope.name="";
}
else
{
$scope.search2=$scope.name;
}
})
$scope.order="-请选择-";
//排序
$scope.pai=function () {
if( $scope.order!="-请选择-")
{
if( $scope.order=="票数正叙")
{
console.log("0");
return false;
}
else
{
return true;
}
}
return false;
}
//添加球员
$scope.show=false;
$scope.add=function () {
$scope.show=true;
}
$scope.uname="";
$scope.uwei="";
$scope.uhao="";
$scope.upiao="";
$scope.adduser=function () {
if( $scope.uname=="" || $scope.uwei=="" || $scope.uhao=="" || $scope.upiao=="")
{
alert("此项为必填项");
}
else
{
for(var i=0;i<$scope.data.length;i++)
{
if($scope.data[i].name==$scope.uname)
{
alert("此球员已存在");
$scope.uname="";
$scope.uwei="";
$scope.uhao="";
$scope.upiao="";
break;
}
else if(i==$scope.data.length-1)
{
$scope.data.push({name:$scope.uname,wei:$scope.uwei,hao:$scope.uwei,piao:$scope.upiao});
$scope.uname="";
$scope.uwei="";
$scope.uhao="";
$scope.upiao="";
$scope.show=false;
break;
}
}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
查询:<input type="text" ng-model="name">
排序:
<select ng-model="order">
<option>-请选择-</option>
<option>票数倒叙</option>
<option>票数正叙</option>
</select><br>
<button ng-click="add()" class="btn">添加球员</button>
<table border="1px soilde #000" width="400px">
<tr>
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
<tr ng-repeat="item in data|filter:search2|orderby:'piao':pai()">
<td>{{item.name}}</td>
<td>{{item.wei}}</td>
<td>{{item.hao}}</td>
<td>{{item.piao}}</td>
</tr>
</table>
<table border="1px solide #000" ng-show="show">
<tr>
<td>姓名:</td>
<td><input type="text" ng-model="uname"></td>
</tr>
<tr>
<td>位置:</td>
<td><input type="text" ng-model="uwei"></td>
</tr>
<tr>
<td>球号:</td>
<td><input type="text" ng-model="uhao"></td>
</tr>
<tr>
<td>票数:</td>
<td><input type="text" ng-model="upiao"></td>
</tr>
<tr align="center"><td><button ng-click="adduser()">添加</button></td></tr>
</table>
</body>
</html>