Code d'implémentation de la fonction de requête floue AngularJS-js tutoriel-php.cn

Code d'implémentation de la fonction de requête floue AngularJS

小云云

Libérer： 2018-01-03 16:31:27

original

1939 Les gens l'ont consulté

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 est

6. 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">

Copier après la connexion

Requête :

Tri :

姓名	位置	球号	票数
{{item.name}}	{{item.wei}}	{{item.hao}}	{{item.piao}}

姓名:
位置:
球号:
票数:

Recommandations associées :

Explication détaillée de la façon dont php7 implémente la requête floue MongoDB

Comment implémenter une requête floue en php

Qu'est-ce qu'une requête floue en php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Code d'implémentation de la fonction de requête floue AngularJS