购物车+批量删除

来源：互联网发布：红米note4x网络不稳定编辑：程序博客网时间：2024/05/22 02:30

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../AngularJS/angular.js" ></script>
       <script>
           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               $scope.shops = [{
                   name:"qq1",
                   price:12.9,
                   num:3,
                   state:false
               },{
                   name:"wx1",
                   price:22,
                   num:5,
                   state:false
               },{
                   name:"qq2",
                   price:33,
                   num:6,
                   state:false
               },{
                   name:"wx2",
                   price:44,
                   num:4,
                   state:false
               }];

               //增加
               $scope.add = function(index){
                   $scope.shops[index].num += 1;
               }
               //减少
               $scope.reduce = function(index){
                   if($scope.shops[index].num>1){
                       $scope.shops[index].num -= 1;
                   }else{
                       if(window.confirm("要删除"+$scope.shops[index].name+"吗？")){
                           $scope.shops.splice(index,1);
                       }else{

                       }
                   }
               }

               //获取总价
               $scope.allPrice = function(){
                   var all = 0;
                   for(index in $scope.shops){
                       all += $scope.shops[index].price * $scope.shops[index].num;
                   }
                   return all;
               }

               //全选
               $scope.selectAll = false;
               $scope.selectAllFun = function(){
                   if($scope.selectAll){
                       for(index in $scope.shops){
                           $scope.shops[index].state = true;
                       }
                   }else{
                       for(index in $scope.shops){
                           $scope.shops[index].state = false;
                       }
                   }
               }

               //反选
               $scope.checkSelectAll = function(){
                   var flag = false;
                   for(index in $scope.shops){
                       if($scope.shops[index].state){

                       }else{
                           flag = true;
                       }
                   }
                   //至少有一个没有被选中
                   if(flag){
                       $scope.selectAll = false;
                   }else{
                       $scope.selectAll = true;
                   }
               }

               //批量删除
               $scope.deleteSelected = function(){
                   var selectedShop = [];
                   for(index in $scope.shops){
                       if($scope.shops[index].state){
                           selectedShop.push($scope.shops[index].name);
                       }
                   }

                   if(selectedShop.length>0){
                       for(i1 in selectedShop){
                           for(i2 in $scope.shops){
                               if(selectedShop[i1] == $scope.shops[i2].name){
                                   $scope.shops.splice(i2,1);
                               }
                           }
                       }
                   }else{
                       alert("请先选择")
                   }
               }

               //判断数据源的长度
               $scope.getSize = function(){
                   if($scope.shops.length > 0 ){
                       return false;
                   }else{
                       return true;
                   }
               }
           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>我的购物车</h3>
           <button ng-click="deleteSelected()">批量删除</button><br /><br />
           <table ng-hide="getSize()" border="1 solid blue" cellpadding="10" cellspacing="0">
               <thead>
                   <tr>
                       <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
                       <th>name</th>
                       <th>price</th>
                       <th>number</th>
                       <th>totalPrice</th>
                       <th>option</th>
                   </tr>
               </thead>
               <tbody>
                   <tr ng-repeat="shop in shops">
                       <td><input type="checkbox" ng-model="shop.state" ng-click="checkSelectAll()"/></td>
                       <td>{{shop.name}}</td>
                       <td>{{shop.price | currency:"￥"}}</td>
                       <td>
                           <button ng-click="reduce($index)">-</button>
                           <input type="number" ng-model="shop.num" style="width: 30px;"/>
                           <button ng-click="add($index)">+</button>
                       </td>
                       <td>{{shop.price * shop.num | currency:"￥"}}</td>
                       <td><button>删除</button> </td>
                   </tr>
                   <tr>
                       <td colspan="6">总价为：<span ng-bind="allPrice() | currency:'￥'"></span></td>
                   </tr>
               </tbody>
           </table>

           <span ng-show="getSize()">您的购物车为空，请先逛<a href="#">购物车</a></span>
       </center>
   </body>
</html>

阅读全文

0 0