首頁 > 文章 > web前端 > AngularJS模糊查詢功能實作程式碼

AngularJS模糊查詢功能實作程式碼

小云云原創: 2018-01-03 16:31:271940瀏覽

最近做專案遇到這樣的需求，要求添加球員的功能，具體樣式沒做具體要求，下面小編給大家帶來了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">

##查詢:

排序:

<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模糊查詢功能實作程式碼

相關文章