批量删除

最新推荐文章于 2023-06-28 12:09:47 发布

77777。

最新推荐文章于 2023-06-28 12:09:47 发布

阅读量149

点赞数

本文链接：https://blog.csdn.net/qq_41646495/article/details/79093265

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           #sd{
               border-radius: 10px;
               background-image:url(img/ss.jpg);
                background-position:right;
                background-repeat:no-repeat;

           }

       </style>
       <script src="js/angular.min.js"></script>
       <script>
           angular.module("gaoyn",[])
           .controller("democ",function($scope,$http){
               //$http请求网络上的数据 get():请求指定路径的数据
               $http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
               .then(function(d){   //d---->网址返回数据
                   // $scope.persons ==>视图中遍历的对象
                   $scope.persons=d.data; //json串根据键获取值   对象.键名
               });
               //每行遍历都会调用getAge 传进来出生日期, 在函数
               $scope.getAge=function(bir){
                   var b= new Date(bir).getYear(); //出生的年份
                   var nowb=new Date().getYear();
                   return nowb-b;
               }

               $scope.del=function(id){ //js删除只能根据索引删除
                   //根据id查找id所对应索引
                   var index=0;
                   for(var i in $scope.persons){
                       if( $scope.persons[i].id==id){
                           index=i;
                       }
                   }

                   //弹框确认是否删除
                   var f= confirm("确定删除吗?");
                   if(f){
                       $scope.persons.splice(index,1);
                   }
               }

               $scope.ckall1=function(){
                   console.log($scope.persons);
                   // 遍历数组,让数组的对象状态是否选中----->顶层的复选框
                   for(var i in $scope.persons){
                       $scope.persons[i].ck= $scope.ckall;
                   }
               }


               $scope.delAll=function(){
                   for(var i=0;i<$scope.persons.length;i++){
                       if($scope.persons[i].ck){ //判断当前行是否被勾选,如果勾选则进行删除操作
                           $scope.persons.splice(i,1); //删除完毕后,下个对象自动移动到当前索引
                           i--;

                       }
                   }
               }

               $scope.getDname=function(dname){ //每行显示之前都自动调用getDname dname是当前行对应部门名称
                   //获取部门查询输入框的值
                   if($scope.seldepart==undefined || $scope.seldepart==""){ //判断无条件过滤,使其全部显示
                       return true; //return 结束方法的作用
                   }

                   //dname中是否含有输入框输入部分字符     var i= "我是八维讲师".indexOf("八维");
                   if(dname.indexOf($scope.seldepart)>-1){
                       return true;
                   }
                   return false;
               }

           })
       </script>
   </head>
   <body ng-app="gaoyn" ng-controller="democ">
       
       <h1 ng-show="persons.length==0">
           页面无操作数据
       </h1>

       
       <div ng-show="persons.length>0">
       <table border="1px">
           <tr>
               <td colspan="7">
                   <input type="checkbox" ng-model="ckall" ng-click="ckall1()" />
                   <button ng-click="delAll()" >批量删除</button>
                   <input id="sd" ng-model="seldepart" placeholder="根据部门模糊查询" />
               </td>

           </tr>

           <tr ng-repeat="d in persons|orderBy:'+birthday'" ng-show="getDname(d.department.name)" >
               <td><input type="checkbox" ng-model="d.ck" /> </td>
               <td>{{d.name}}</td>
               <td>{{getAge(d.birthday)}}</td>
               <td>{{d.gender}}</td>
               <td>{{d.salary|currency:"¥:"}}</td>
               <td>{{d.department.name}}</td>
               <td>{{d.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
               <td><button ng-click="del(d.id)">删除</button></td>
           </tr>
       </table>

       </div>
   </body>
</html>