집 >웹 프론트엔드 >JS 튜토리얼 >AngularJS 퍼지 쿼리 함수 구현 코드

AngularJS 퍼지 쿼리 함수 구현 코드

小云云원래의: 2018-01-03 16:31:271987검색

최근 프로젝트에서 플레이어 기능을 추가해야 하는 필요성이 발생했습니다. 특정 스타일에 대한 특정 요구 사항은 없습니다. 다음 편집기는 AngularJS 퍼지 쿼리 기능 구현 코드(필터 내용 드롭다운 메뉴, 정렬, 민감한 문자 필터링, 확인 및 판단 후 추가) 양식 정보) 관심 있는 친구들은 꼭 살펴보시길 바랍니다. 모두에게 도움이 되었으면 좋겠습니다.

참고: 플레이어 추가 기능에 대한 특정 기술 요구 사항이 없으며 플레이어를 추가하는 페이지에 대한 특정 스타일 요구 사항도 없습니다.

1. 위 그림에서 페이지의 모든 요소를 구현하고, 페이지 레이아웃이 규칙적이며, 효과가 그림과 일치합니다.

2. 카피라이팅 표시 구현, 효과에 따른 표시

3. 쿼리 감지 단어 필터링 구현, 쿼리 후 목록 변경 구현

4. 역순 구현, 정방향 정렬 구현, 드롭다운 목록 정렬 효과 구현

5. 버튼 배경이 일관되고 버튼 스타일 구현

6. 플레이어 추가 페이지, 플레이어 추가 페이지 스타일, 플레이어 추가 기능 및 플레이어 추가 필수 항목 판단, 플레이어 추가 후 테이블에 표시될 수 있으며 이미 기존 플레이어가 있습니다.

7. 테이블 스타일이 사진과 일치합니다.

코드:

<!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">

Query:

Sort:

<select ng-model="order">
   <option>-请选择-</option>
   <option>票数倒叙</option>
   <option>票数正叙</option>
</select><br>
<button ng-click="add()" class="btn">添加球员</button>
<table border="1px soilde #000" width="400px">
   <tr>
     <th>姓名</th>
     <th>位置</th>
     <th>球号</th>
     <th>票数</th>
   </tr>
  <tr ng-repeat="item in data|filter:search2|orderBy:&#39;piao&#39;:pai()">
    <td>{{item.name}}</td>
    <td>{{item.wei}}</td>
    <td>{{item.hao}}</td>
    <td>{{item.piao}}</td>
  </tr>
</table>
 <table border="1px solide #000" ng-show="show">
   <tr>
     <td>姓名:</td>
     <td><input type="text" ng-model="uname"></td>
   </tr>
   <tr>
     <td>位置:</td>
     <td><input type="text" ng-model="uwei"></td>
   </tr>
   <tr>
     <td>球号:</td>
     <td><input type="text" ng-model="uhao"></td>
   </tr>
   <tr>
     <td>票数:</td>
     <td><input type="text" ng-model="upiao"></td>
   </tr>
   <tr align="center"><td><button ng-click="adduser()">添加</button></td></tr>
 </table>
</body>
</html>

AngularJS 퍼지 쿼리 함수 구현 코드

관련 기사