点击搜索按钮进行过滤

最新推荐文章于 2023-01-04 00:30:41 发布

y126_Info

最新推荐文章于 2023-01-04 00:30:41 发布

阅读量534

点赞数

本文链接：https://blog.csdn.net/y126_Info/article/details/79094550

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   <script type="text/javascript" src="js/angular/angular.js"></script>
   <style type="text/css">
      <style type="text/css">
       .main{
           width: 800px;
           height: 600px;
           background: burlywood;
       }

       .table{
           width: 750px;
           height: 150px;
       }
   </style>
   <script>
      var app=angular.module("myApp",[]);
      var data=[{
         id:10011120,
         name:"iphoneX",
           num:99,
         },{
         id:10011121,
         name:"华为mate10",
           num:20,
      },{
         id:10011122,
         name:"vivoR12",
           num:55,
      }];
      app.controller("myCtrl",function($scope){
          $scope.data=data;

          $scope.add=function(){
              var flag1=flag2=flag3=false;
               if($scope.e_id==null || $scope.e_id==""){
                  alert("编号不能为空！");
                  flag1=false;
              }else if(isNaN($scope.e_id)){
                  alert("编号必须为数字！");
                  flag1=false;
              }else if($scope.e_id.length!=8){
                  alert("编号长度必须为8位！");
                  flag1=false;
              }else{
                  flag1=true;
              }

               if($scope.e_name==null || $scope.e_name==""){
                  alert("资产名称不能为空");
                  flag2=false;
               }

               var flag=false;
               for(index in $scope.data){
                  if($scope.e_name==$scope.data[index].name){
                      flag=true;

                  }
               }

               if(flag){
                  alert("改资产已经存在！")
                  flag2=false;
               }else{
                  flag2=true;
               }

             if($scope.e_num==null || $scope.e_num==""){
              alert("数量不能为空");
              flag3=false;
             }else if(isNaN($scope.e_num)){
              alert("数量必须为数字");
              flag3=false;
             }else{
              flag3=true;
             }

             if(flag1 && flag2 && flag3){
              $scope.data.push({
                  id:$scope.e_id,
                  name:$scope.e_name,
                  num:$scope.e_num,
              });
             }

             $scope.e_id="";
             $scope.e_name="";
             $scope.e_num="";
          }

             $scope.isShow=false;
             $scope.addji=function(){
                if($scope.isShow){
                    $scope.isShow=false;
                }else{
                    $scope.isShow=true;
                }
             }

          $scope.searchName=function(){
                var flag=false;
                $scope.searchShow="";
                for(index in $scope.data){
                 if($scope.search==$scope.data[index].name){
                     flag=true;
                 }
                }

            if($scope.search==null || $scope.search==""){
               alert("输入框不能为空");
               $scope.searchShow="";
            }else if(flag){
               alert("搜到相关内容！");
               $scope.searchShow=$scope.search;
            }else{
               alert("没有搜到相关内容");
               $scope.searchShow==null;
            }
          }
      });
   </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
      <div class="main">
             <table>
             <tr>
                <td><button ng-click="addji()">资产登记</button></td>
                <td width="400"></td>
                <td >资产搜索<input type="text" ng-model="search"/><button ng-click="searchName()">搜索</button></td>
             </tr>
             </table>
        <table class="table" border="1" cellpadding="0" cellspacing="0">
           <tr>
              <th height="25">资产编号</th>
              <th height="25">资产名称</th>
              <th>资产数量</th>
           </tr>
           <tr align="center" ng-repeat="d in data | filter:searchShow">
              <td height="25">{{d.id}}</td>
              <td height="25 ">{{d.name}}</td>
              <td height="25">{{d.num}}</td>
           </tr>
           <tr>
                 <td height="25"></td>
                 <td height="25"></td>
                 <td height="25"></td>
           </tr>
           <tr>
                 <td height="25"></td>
                 <td height="25"></td>
                 <td height="25"></td>
           </tr>
        </table>
        <div ng-show="isShow">
             资产编号 <input type="text" placeholder="请输入编号" ng-model="e_id"/><br/><br/>
             资产名称 <input type="text" placeholder="请输入名称" ng-model="e_name"/><br/><br/>
                        资产数量 <input type="text" placeholder="请输入数量" ng-model="e_num"/><br/><br/>
        <input type="button" value="资产录入" ng-click="add()"/>
        </div>
      </div>
      </center>
   </body>
</html>