Heim >Web-Frontend >js-Tutorial >Implementierungscode für die AngularJS-Fuzzy-Abfragefunktion

Implementierungscode für die AngularJS-Fuzzy-Abfragefunktion

小云云
小云云Original
2018-01-03 16:31:271987Durchsuche

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}}
                                                                                       
姓名:
位置:
球号:
票数:

Verwandte Empfehlungen:

Detaillierte Erklärung, wie PHP7 MongoDB-Fuzzy-Abfragen implementiert

So implementieren Sie Fuzzy-Abfragen in PHP

Was ist Fuzzy-Abfragen in PHP?

Das obige ist der detaillierte Inhalt vonImplementierungscode für die AngularJS-Fuzzy-Abfragefunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn