购物车=加减+计算+总和+全选+反选+删除

最新推荐文章于 2024-03-11 18:27:29 发布

枯泔U

最新推荐文章于 2024-03-11 18:27:29 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/qq_40531965/article/details/78606855

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <link rel="stylesheet" href="ionic/ionic.css" />
       <script type="text/javascript" src="ionic/ionic.bundle.min.js" ></script>
       <style type="text/css">
           #myInput {
               margin-right: 40px;
               margin-left: 50px;
           }
           img{
               vertical-align: middle;
               margin-top: 6px;
           }
           #selectAll {
               margin-right: 40px;
               margin-left: 80px;
           }
       </style>
       <script>
           var app=angular.module("myApp",["ionic"]);
           app.controller("myCtrl",function($scope){
               $scope.items=[{
                   name:"纯手工制作木质时钟精致家具",
                   price:150,
                   num:1,
                   url:"img/a1.png",
                   state: false
               },
               {
                   name:"纯手工制作木质时钟精致家具",
                   price:119,
                   num:2,
                   url:"img/a2.png",
                   state: false
               },
               {
                   name:"纯手工制作木质时钟精致家具",
                   price:120,
                   num:0,
                   url:"img/a3.png",
                   state: false
               }
               ];
               //完成商品的加减功能
               $scope.less=function(index){
                   if ($scope.items[index].num==0)
                   {
                       alert("已经减到0了");
                   } else
                   {
                       $scope.items[index].num -=1;
                       $scope.allPrice=0;
                       for (index in $scope.items)
                       {
                           if ($scope.items[index].state)
                           {
                               $scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
                           }
                       }
                   }
               }
               //数量增加
               $scope.add=function(index){
                  $scope.items[index].num +=1;
                   $scope.allPrice=0;
                       for (index in $scope.items)
                       {
                           if ($scope.items[index].state)
                           {
                               $scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
                           }
                       }
               }
               //删除功能
               $scope.delete = function(index) {
                   if(window.confirm("确定要删除当前项吗？")) {
                       $scope.items.splice(index, 1);

                       $scope.allPrice = 0;
                       for(index in $scope.items) {
                           if($scope.items[index].state) {
                               $scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
                           }
                       }
                   }
               }

               //检测是否有选中项，计算总价
               $scope.selectAll=false;
               $scope.allPrice=0;
               $scope.checkSelAll=function(){
                  //判断全选按钮是否选中
                  if ($scope.selectAll)
                  {
                      for (index in $scope.items)
                      {
                          //所有商品状态变为选中
                          $scope.items[index].state=false;
                      }
                      $scope.allPrice=0;
                      $scope.selectAll=false;
                  } else
                  {
                      //遍历所有上面计算总价
                      for (index in $scope.items)
                      {
                          //所有商品状态变为选中
                          $scope.items[index].state=true;
                      }
                      for(index in $scope.items)
                      {
                          $scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
                      }
                      $scope.selectAll=true;
                  }
               }

               //选中每一个多选按钮，计算当前的总价
               $scope.selectItem=function(index)
               {
                  $scope.allPrice=0;
                  for(index in $scope.items)
                      {
                          //所有商品状态变为选中
                          if ($scope.items[index].state)
                          {
                              $scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
                          }

                      }
               }

           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <ion-header-bar align-title="center" class="bar-positive">
           <h1 class="title">购物车</h1>
       </ion-header-bar>
       <ion-content>
           <ion-checkbox ng-model="isChecked">趣艺工坊</ion-checkbox>
           
           <ion-list>
               <ion-item ng-repeat="item in items">
                   <div style="width: 100%; height: 100px;">
                       <div style="float: left;">
                           <input id="myInput" ng-click="selectItem($index)" type="checkbox" ng-model="item.state" />
                           <img src="{{item.url}}" />
                       </div>
                       <div style="float: left;margin-left: 50px;">
                           <span>{{item.name}}</span><br/><br/>
                           <span>{{item.price}}</span><br /><br />
                           <button ng-click="less($index)">-</button>
                           <span>{{item.num}}</span>
                           <button ng-click="add($index)">+</button>
                           <span style="margin-left: 200px;color:#FF3B30;" ng-click="delete($index)">删除</span>
                       </div>
                   </div>
               </ion-item>
           </ion-list>
           <div style="width: 100%; height: 100px; margin-top: 50px;">
               <input id="selectAll" type="checkbox" ng-model="selectAll" ng-click="checkSelAll()" />全选
               <span style="margin-left: 250px;">合计：<span>{{allPrice | currency:"￥："}}</span></span>
               <a style="margin-left: 50px;" href="https://www.alipay.com/)">结算</a>
           </div>
       </ion-content>
   </body>
</html>

枯泔U

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
购物车=加减+计算+总和+全选+反选+删除

#myInput { margin-right: 40px; margin-left: 50px; } img{ vertical-align: middle; margin-top: 6px;
复制链接

扫一扫