Maison >interface Web >js tutoriel >Code d'implémentation de la fonction de requête floue AngularJS
Code d'implémentation de la fonction de requête floue AngularJS
- 小云云original
- 2018-01-03 16:31:271986parcourir
J'ai récemment rencontré une telle demande dans un projet, nécessitant l'ajout de fonctions de lecteur. Il n'y a pas d'exigences spécifiques pour le style spécifique. L'éditeur suivant vous propose le code d'implémentation de la fonction de requête floue AngularJS (menu déroulant de contenu de filtre,). trier, filtrer les caractères sensibles, vérifier et juger) (Ajoutez les informations du formulaire plus tard). Les amis intéressés peuvent y jeter un œil. J'espère que cela pourra aider tout le monde.
Remarque : Il n'y a pas d'exigences techniques spécifiques pour la fonction d'ajout de joueurs, et il n'y a pas d'exigences de style spécifiques pour la page permettant d'ajouter des joueurs.
1. Réalisez tous les éléments de la page dans l'image ci-dessus, la mise en page est régulière et l'effet est cohérent avec l'image ci-dessus
2 Réalisez l'affichage de la rédaction, affichez selon le. effet
3. Réaliser la requête, réaliser le filtrage des mots sensibles à la requête et réaliser les modifications de la liste après la requête
4. Réaliser l'ordre inverse, réaliser la séquence avant et l'effet de tri des listes déroulantes
<.>5. L'arrière-plan du bouton est cohérent et le style du bouton est6. Implémentez la page d'ajout de joueur, ajoutez le style de page de joueur, ajoutez la fonction de joueur, ajoutez le jugement requis du joueur. affiché dans le tableau, et le jugement du poids du joueur existe déjà. 7. Le style du tableau est cohérent avec le style de l'image 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">Requête :Tri :| 姓名 | 位置 | 球号 | 票数 |
|---|---|---|---|
| {{item.name}} | {{item.wei}} | {{item.hao}} | {{item.piao}} |
| 姓名: | |
| 位置: | |
| 球号: | |
| 票数: | |