AngularJS ファジークエリ関数の実装コード

私は最近、プレーヤー関数の追加を必要とするこのようなニーズに遭遇しました。次のエディターは、AngularJS ファジー クエリ関数の実装コード (フィルター コンテンツ ドロップダウン メニュー、ソート、機密文字をフィルタリングし、検証と判断後に追加します）フォーム情報）、興味のある友人はそれを見てください、私はそれがすべての人に役立つことを願っています。

注: プレーヤーを追加する機能に特定の技術要件はありません。また、プレーヤーを追加するページに特定のスタイル要件もありません。

1. 上の画像のページのすべての要素を実現し、ページのレイアウトは規則的で、効果は画像と一致しています

2. コピーライティングの表示を実現し、効果に応じて表示します

3.クエリに依存した単語のフィルタリングを実現し、クエリ後のリストの変更を実現します

4. 逆順を実現し、順方向の並べ替え効果を実現します

5. ボタンの背景とボタンのスタイルを実現します

6.選手追加ページ、選手ページ追加スタイル、選手追加機能、選手追加必須項目判定、選手追加後、表に表示でき、既存選手が存在します。

7. 表のスタイルは画像と一致しています

コード:

nbsp;html>


  <meta>
  <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></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>

クエリ:

並べ替え:

<select>
   <option>-请选择-</option>
   <option>票数倒叙</option>
   <option>票数正叙</option>
</select><br>
<button>添加球员</button>

                                                         

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

                                                                                       

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

関連する推奨事項:

php7でMongoDBのファジークエリを実装する方法を詳しく説明

phpでファジークエリを実装する方法

phpのファジークエリとは

以上がAngularJS ファジークエリ関数の実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。