AngularJS表格数据全选反选,批量删除,借助计数器删除

最新推荐文章于 2021-01-21 10:54:46 发布

meng_c_

最新推荐文章于 2021-01-21 10:54:46 发布

阅读量736

点赞数

本文链接：https://blog.csdn.net/thw_m/article/details/78330858

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           #p{
               font-size: 23px;
           }
           div span{
               color: #337AB7;
           }
           button{
               size: 40px;
               background: #337AB7;
               border: 0px;
               border-radius: 3px;
               color: #FFFFFF;
               font-size: 15px;
           }
           #delbtn{
               size: 40px;
               padding: 8px;
               font-size: 10px;
           }

           #delbtnred{
               background: #D9534F;
               size: 40px;
               padding: 8px;
               font-size: 10px;
           }
       </style>
       <script type="text/javascript" src="../AngularJS库/angular.js" ></script>
       <script>
           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               //数组,初始化
               $scope.cartArr = [{
                   name:"qq",
                   price:12.90,
                   number:2,
                   state:false
               },{
                   name:"wx",
                   price:23.90,
                   number:1,
                   state:false
               },{
                   name:"wx",
                   price:99.90,
                   number:1,
                   state:false
               }];

               //默认一开始显示div
               $scope.div1show = true;
               $scope.div2show = false;

               //全选按钮的初始化
               $scope.checkAll = false;
               var a = 0;
               //正着全选
               $scope.selectAll = function(){
                   //判断当前是选中还是取消选中
                   if($scope.checkAll==true){
                       //遍历数组,都选中
                       for(var i=0;i<$scope.cartArr.length;i++){
                           $scope.cartArr[i].state = true;
                           a++;
                       }
                   }else{
                       for(var i=0;i<$scope.cartArr.length;i++){
                           $scope.cartArr[i].state = false;
                           a--;
                       }
                   }
               };

               //反着全选,,传参 ,当前 index,下标
               $scope.selectOne = function(index){
                   //如果当前选中了小按钮
                   if($scope.cartArr[index].state==true){
                       a++;
                   }else{
                       //如果当前没选中,a--
                       a--;
                   }
                   //判断a 是否等于数组长度
                   if(a==$scope.cartArr.length){
                       //全部选中了就让大的全选按钮选中
                       $scope.checkAll = true;
                   }else{
                       $scope.checkAll = false;
                   }
               }

               //删除选中商品的点击事件
               $scope.deleteSelected = function(){
                   //判断a的长度
                   if(a==0){
                       alert("请选择要删除的商品");
                   }else{
                       for(var i=0;i<$scope.cartArr.length;i++){
                           if($scope.cartArr[i].state==true){
                               //遍历过程中如果当前选中了,就删除掉
                               $scope.cartArr.splice(i,1);
                               //删除了当前的这一条可能下标越界.所以i--
                               i--;
                               a--;
                           }
                       }

                       //删除完之后,全选按钮变成没有选中
                       $scope.checkAll = false;

                       if($scope.cartArr.length==0){
                           //如果数组没数据了,,就隐藏div
                           $scope.div1show = false;
                           $scope.div2show = true;
                       }
                   }
               }

           //每一行的删除的点击事件
           $scope.deletehang = function(index){
               $scope.cartArr.splice(index,1);
               //a--;

                       if($scope.cartArr.length==0){
                           //如果数组没数据了,,就隐藏div
                           $scope.div1show = false;
                           $scope.div2show = true;
                       }
           };


           //加号按钮的点击事件
           $scope.jia = function(index){
               //点击加号,,对应当前行的number数量加1
               $scope.cartArr[index].number++;
           }

           //减号按钮的点击事件
           $scope.jian = function(index){

               if($scope.cartArr[index].number==1){
                   //如果已经数量为1了 ,不能再减去,,询问是否删除
                   var queren = confirm("是否删除该商品?");
                   //alert(queren);
                   if(queren){

                       //当用户点击”确认”时删除该条商品信息
                       $scope.cartArr.splice(index,1);
                       //alert(a);
                       //a++;
                       if($scope.cartArr.length==0){
                           //如果数组没数据了,,就隐藏div
                           $scope.div1show = false;
                           $scope.div2show = true;
                       }
                   }
               }else{
                   //点击减号,,对应的数量减1
               $scope.cartArr[index].number--;
               }
           }

           //计算总价的方式
           $scope.zongjia = function(){
               var zongj = 0;//总价默认是0
               angular.forEach($scope.cartArr,function(item,key){
                   zongj += item.number * item.price;

               });
               //将计算好的总价返回
               return zongj;
           }

           $scope.zongsl = function(){
               var zongshu = 0;
               angular.forEach($scope.cartArr,function(item,key){
                   zongshu += item.number;
               });
               return zongshu;
           }

           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <p id="p">我的购物车</p>
       <hr />
       <div ng-show="div2show">您的购物车为空,<span>去逛商场</span></div>
       <div ng-show="div1show" id="divbiao">

       <br /><br />
       <center>
       <table width="70%" border="1" cellpadding="3" cellspacing="0">
           <thead>
               <tr>
                   <th colspan="6" align="right">
       <button id="delbtnred" ng-click="deleteSelected()" >删除选中商品</button>
       </th>
       </tr>
           </thead>
           <thead>
               <tr>
                   <th>
               <input type="checkbox" ng-model="checkAll" ng-click="selectAll()"/>
                   </th>
                   <th>name</th>
                   <th>price</th>
                   <th>number</th>
                   <th>totalPrice</th>
                   <th>option</th>
               </tr>
               <tbody align="center">
           <tr ng-repeat="x in cartArr">
                       <td>
       <input type="checkbox" ng-model="x.state" ng-click="selectOne($index)"/>
                       </td>
                       <td>{{x.name}}</td>
                       <td>{{x.price | currency:"¥"}}</td>
                       <td>
       <button ng-click="jian($index)">-</button>
           <input style="width: 25px;text-align: center;" type="number" ng-model="x.number" />
       <button ng-click="jia($index)">+</button>
                       </td>
                       <td>{{x.price*x.number | currency:"¥"}}</td>
                       <td>
       <button ng-click="deletehang($index)" id="delbtn">删除</button>
                       </td>
                   </tr>
                   <tr align="left">
                       <td colspan="6">总价为 :
                       {{zongjia() | currency:"¥"}}
                               
                       总数量为 :
                       {{zongsl()}}</td>

                   </tr>
               </tbody>
           </thead>
       </table>
       </center>
       </div>
   </body>
</html>