使用angularjs 添加，查询，删除操作

来源：互联网发布：x教授知乎编辑：程序博客网时间：2024/06/05 02:34

<!DOCTYPE html>
<html ng-app="app">
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           select{
               width: 100px;
           }
           tr{
               background-color: white;
               text-align: center;
           }
       </style>
       <script type="text/javascript" src="js/angular.min.js" ></script>
       <script>
           angular.module("app",[]).controller("mycontr",function($scope,$filter){
               $scope.arr=[{"kai":false,"name":"王闯","pass":"111","age":25,"sex":"男"},
                               {"kai":false,"name":"张三","pass":"222","age":35,"sex":"女"},
                               {"kai":false,"name":"李四","pass":"333","age":15,"sex":"男"},
                               {"kai":false,"name":"王五","pass":"444","age":25,"sex":"女"},];
               $scope.shuarr=$scope.arr;
               $scope.name1="";
               $scope.pass1="";
               $scope.age1="";
               $scope.sex1="";
               $scope.bool=function(){
                   var n=$scope.name1;
                   var p=$scope.pass1;
                   var a=parseInt($scope.age1);

                   var s=$scope.sex1;
                   var kai1=false;
                   var kai2=false;
                   var kai3=false;
                   var kai4=false;
                   if(n!=null&n!=""){
                       kai1=true;
                   }
                   if(p!=""&p!=null){
                       kai2=true;
                   }
                   if(a==$scope.age1){
                       kai3=true;
                   }
                   if(s!=""&s!=null){
                       kai4=true;
                   }
                   if(kai1&kai2&kai3&kai4){
                       return true;
                   }else{
                       return false;
                   }
               }
               $scope.tijiao=function(){
                   if($scope.bool()){
                       var user={"kai":false,"name":""+$scope.name1+"","pass":""+$scope.pass1+"","age":""+$scope.age1+"","sex":""+$scope.sex1+""};
                       $scope.shuarr.unshift(user);
                       document.getElementById("addtable").style.display="none";
                   }else{
                       alert("输入的值类型不对!")
                   }

                   $scope.name1="";
                   $scope.pass1="";
                   $scope.age1="";
                   $scope.sex1="";

               }
               $scope.showtable=function(){
                   document.getElementById("addtable").style.display="block";
               }
               $scope.qxuan=function(){
                   var qx=document.getElementById("qx");

                   for (var i=0;i<$scope.shuarr.length;i++) {
                       $scope.shuarr[i].kai=qx.checked;
                   }
               }
               $scope.zixuan=function(i){
                   var qx=document.getElementById("qx");
                   qx.checked=false;

               }
               $scope.shanall=function(){
                   $scope.shuarr.splice(0,$scope.shuarr.length);
               }
               $scope.shanpi=function(){
                   var y=0;
                   var kg=false;
                   for (var i=0;i<$scope.shuarr.length;i++) {
                       if($scope.shuarr[i].kai){
                           y=i;
                           kg=true;
                           break;
                       }
                   }
                   if(kg){
                       $scope.shuarr.splice(y,1);
                       var qx=document.getElementById("qx");
                       qx.checked=false;
                       $scope.shanpi();
                   }
               }
               $scope.ncha="";
               $scope.sxing="";
               $scope.anian="";
               $scope.shuarr2=[];
               $scope.namecha=function(){
                   if($scope.anian!=""&$scope.anian!=null){
                       $scope.agexuan();
                       $scope.guolv1();
                   }else{
                       $scope.guolv();
                   }

               }
               $scope.sexgai=function(){
                   if($scope.anian!=""&$scope.anian!=null){
                       $scope.agexuan();
                       $scope.guolv1();
                   }else{
                       $scope.guolv();
                   }

               }
               $scope.agegai=function(){
                   if($scope.anian!=""&$scope.anian!=null){
                       $scope.agexuan();
                       $scope.guolv1();
                   }

               }
               $scope.agexuan=function(){
                   if($scope.anian!=null&$scope.anian!=""){
                       var agea=$scope.anian.split("-");
                       $scope.shuarr2=[];
                       for (var i=0;i<$scope.arr.length;i++) {
                           if($scope.arr[i].age>agea[0]&$scope.arr[i].age<agea[1]){
                               $scope.shuarr2.push($scope.arr[i]);
                           }
                       }

                   }
               }
               $scope.guolv1=function(){
                   var $f=$filter('filter');
                   $scope.f=$f($scope.shuarr2,{"name":$scope.ncha,"sex":$scope.sxing});
                   $scope.shuarr=[];
                   for (var i=0;i<$scope.f.length;i++) {
                       $scope.shuarr.push($scope.f[i]);
                   }
               }
               $scope.guolv=function(){
                   var $f=$filter('filter');
                   $scope.f=$f($scope.arr,{"name":$scope.ncha,"sex":$scope.sxing});
                   $scope.shuarr=[];
                   for (var i=0;i<$scope.f.length;i++) {
                       $scope.shuarr.push($scope.f[i]);
                   }
               }

           });
       </script>
   </head>
   <body ng-controller="mycontr">
       <br />

       <div style="padding-left: 50px; width: 750px;margin: auto;">
       姓名查找:<input type="text" placeholder="请输入查找的姓名" ng-change="namecha()" ng-model="ncha" />
       
       年龄查找:<select ng-model="anian" ng-change="agegai()">
           <option style="display: none;" value="">请选择</option>
           <option>10-20</option>
           <option>21-30</option>
           <option>31-40</option>
       </select>
       性别查找:<select ng-model="sxing" ng-change="sexgai()">
           <option style="display: none;" value="">请选择</option>
           <option>男</option>
           <option>女</option>
       </select>
       <button ng-click="shanall()">删除全部</button>
       <button ng-click="shanpi()">批量删除</button>
       </div>
       <br />
       <table style="margin: auto;" width="700px" border="0"cellspacing="1" bgcolor="#000000">
           <tr>
               <th>全选<input type="checkbox" ng-click="qxuan()" id="qx"/></th>
               <th>序号</th>
               <th>姓名</th>
               <th>密码</th>
               <th>年龄</th>
               <th>性别</th>
               <th>类别</th>
           </tr>
           <tr ng-repeat="a in shuarr">
               <td><input type="checkbox" ng-model="a.kai" ng-click="zixuan($index)"/></td>
               <td>{{$index}}</td>
               <td>{{a.name}}</td>
               <td>{{a.pass}}</td>
               <td>{{a.age}}</td>
               <td>{{a.sex}}</td>
               <td><button>修改密码</button></td>
           </tr>

       </table>
       <br />
       <div style="width: 200px;text-align: center;margin: auto;"><button ng-click="showtable()">添加用户</button></div>
       <br />
       <table id="addtable" width="200px" style="margin: auto; display: none;" border="0"cellspacing="1" bgcolor="#000000">

           <tr>
               <td width="50px">姓名</td>
               <td><input type="text" placeholder="请输入姓名" ng-model="name1"/></td>
           </tr>
           <tr>
               <td>密码</td>
               <td><input type="text" placeholder="请输入密码" ng-model="pass1"/></td>
           </tr>
           <tr>
               <td>年龄</td>
               <td><input type="text" placeholder="请输入年龄" ng-model="age1"/></td>
           </tr>
           <tr>
               <td>性别</td>
               <td><input type="text" placeholder="请输入性别" ng-model="sex1"/></td>
           </tr>
           <tr>
               <td colspan="2"><button ng-click="tijiao()">提交</button></td>
           </tr>
       </table>
   </body>

</html>

++++++++++++++++++++++++++++++++++++++++++

<!DOCTYPE html>
<html ng-app="app">
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular.min.js" ></script>
       <script>
           angular.module("app",[]).controller("mycontr",function($scope,$filter){
               $scope.arr=[{"kai":false,"name":"王闯","pass":"111","age":25,"sex":"男"},
                               {"kai":false,"name":"张三","pass":"222","age":35,"sex":"女"},
                               {"kai":false,"name":"李四","pass":"333","age":15,"sex":"男"},
                               {"kai":false,"name":"王五","pass":"444","age":25,"sex":"女"},];
                               $scope.shua=[];
               var e=$filter("filter");
               $scope.f=e($scope.arr,{"age":15});
               for (var i=0;i<$scope.arr.length;i++) {
                   if($scope.arr[i].age>10&$scope.arr[i].age<30){
                       $scope.shua.unshift($scope.arr[i]);
                   }
               }
               alert($scope.shua.length)
           })
       </script>
   </head>
   <body ng-controller="mycontr">
       <input type="text" placeholder="请输入查找的姓名" ng-change="namecha()" ng-model="ncha" />

阅读全文

0 0