Ich bin kürzlich in einem Projekt auf eine solche Anforderung gestoßen, die das Hinzufügen von Player-Funktionen erfordert. Es gibt keine spezifischen Anforderungen für den spezifischen Stil. Der folgende Editor bringt Ihnen den Implementierungscode für die AngularJS-Fuzzy-Abfragefunktion (Dropdown-Menü „Filterinhalt“). Sortieren, filtern Sie sensible Zeichen, überprüfen und beurteilen Sie (fügen Sie die Formularinformationen später hinzu). Ich hoffe, es kann allen helfen.
Hinweis: Es gibt keine besonderen technischen Anforderungen für die Funktion zum Hinzufügen von Spielern und es gibt keine besonderen Stilanforderungen für die Seite zum Hinzufügen von Spielern.
1. Realisieren Sie alle Elemente der Seite im Bild oben, das Seitenlayout ist regelmäßig und der Effekt stimmt mit dem Bild oben überein
2 Realisieren Sie die Anzeige des Texts Wirkung
3. Realisieren Sie die abfragesensitive Wortfilterung und realisieren Sie Listenänderungen nach der Abfrage
4. Realisieren Sie die umgekehrte Reihenfolge, realisieren Sie die Vorwärtsreihenfolge und den Dropdown-Listensortierungseffekt
5. Der Schaltflächenhintergrund ist konsistent und der Schaltflächenstil ist
6. Implementieren Sie die Seite „Spieler hinzufügen“, fügen Sie die Funktion „Spieler“ hinzu und fügen Sie die erforderliche Spielerbeurteilung hinzu in der Tabelle angezeigt und die Beurteilung des Spielergewichts ist bereits vorhanden.
7. Der Tabellenstil stimmt mit dem Bildstil überein
Code:
<!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 src="../angular-1.5.5/angular.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">Abfrage:
Sortieren:
| 姓名 | 位置 | 球号 | 票数 |
|---|---|---|---|
| {{item.name}} | {{item.wei}} | {{item.hao}} | {{item.piao}} |
| 姓名: | |
| 位置: | |
| 球号: | |
| 票数: | |