Angular实现购物车

来源：互联网发布：gov.cn域名注册编辑：程序博客网时间：2024/05/22 00:30
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        table{            border-collapse: collapse;        }        th,td{            padding: 10px;            border: 1px solid #000;        }    </style>    <script src="../angular-1.5.5/angular.js"></script>    <script>        var data=[{'name':'华为','price':'2000','count':1,'done':false},            {'name':'小米','price':'3000','count':1,'done':false},            {'name':'三星','price':'4000','count':1,'done':false},            {'name':'苹果','price':'6000','count':1,'done':false}        ];        var myapp=angular.module("myapp",[]);        myapp.controller("myCtrl",function ($scope) {                $scope.phones=data;                  //计算小计的方法                  $scope.xj=function (sl,i) {                      //声明小计                      $scope.xiaoji="";                      $scope.xiaoji=sl*$scope.phones[i].price;                      return  $scope.xiaoji;                  };                  //计算总价                  $scope.zongjia=function () {                      $scope.zj=0;                      for(var i=0;i<$scope.phones.length;i++){                          $scope.zj+=$scope.phones[i].count*$scope.phones[i].price;                      }                      return $scope.zj;                  };                  //付款的点击事件                  $scope.yf=10;                  $scope.nn=false; //为隐藏实际付款，没点的时候是false隐藏，当点击的时候则改为true,显示出来                  $scope.fukuan=function () {                      //判断总计是否大于16000，大于就包邮，不然就附加邮费                      $scope.nn=true;                      $scope.sj="";                      if($scope.zj>16000){                          $scope.yf=0;                          $scope.sj=$scope.zj;                      }else if($scope.zj<16000&&$scope.zj>0) {                          $scope.yf=10;                          $scope.sj=$scope.zj+ $scope.yf;                      }else if($scope.zj==0){                          $scope.sj=0;                      }                  };                  //进行全选的点击事件                  $scope .ss=false;//声明全选的状态                  $scope.qx=function () {                      for(var i=0;i<$scope.phones.length;i++){                          if($scope .ss==true){                              $scope.phones[i].done=true;                          }else {                              $scope.phones[i].done=false;                          }                      }                  };                  //进行反选                  $scope.fx=function () {                      $scope.n="";                      for(var i=0;i<$scope.phones.length;i++){                          //如果勾选的值改为true说明为勾选状态，开始计数                          if( $scope.phones[i].done==true){                              $scope.n++;                          }else {                              $scope.n--;                          }                          //判断计数器的总数等于数组的长度说明已经全部勾选，把全选的值改为true                          if($scope.n==$scope.phones.length){                              $scope .ss=true;                          }                      }                  };                  //删除的点击事件                  $scope.delete=function (index) {                      //删除的时候让数量减减，当数量为0时删除此条数据                      $scope.phones[index].count--;                      if($scope.phones[index].count==0){                          $scope.phones[index].count=1;                          $scope.phones.splice(index,1);                      }                  };                  //进行批量删除                  $scope.delAll=function () {                      if(confirm("确定删除此些商品吗？")){                          for(var i=0;i<$scope.phones.length;i++){                              if($scope.phones[i].done==true){                                  $scope.phones.splice(i,1);                                  i--;                              }                          }                      }                  };                  //点击减减的动作                  $scope.jian=function (index) {                      $scope.phones[index].count--;                      if($scope.phones[index].count<=1){                          $scope.phones[index].count=1;                      }                  }                //点击加加的动作                  $scope.jia=function (index) {                         $scope.phones[index].count++;                 }                  //添加                    $scope.name1="";                    $scope.price1="";                    $scope.count1="";                  $scope.add=function () {                      alert( 0);                      $scope.ff={'name':$scope.name1,'price':$scope.price1,'count':$scope.count1,'done':false}                      $scope.phones.unshift($scope.ff);                  };        })        </script></head><body ng-app="myapp" ng-controller="myCtrl">  商品的名称：<input type="text" ng-model="name1">  价格：<input type="text"  ng-model="price1"> 数量：<input type="number"  ng-model="count1" >   <button ng-click="add()">添加</button>  <table>      <tr>          <th><input type="checkbox" ng-model="ss" ng-click="qx()"><span>全选</span></th>    <!--qx全选-->          <th>商品名称</th>          <th>价格</th>          <th>数量</th>          <th>小计</th>          <th>操作<button ng-click="delAll()">批量删除</button></th>      </tr>      <tr ng-repeat="a in phones">          <td><input type="checkbox" ng-model="a.done" ng-click="fx()"></td>                   <!--fx反选-->          <td>{{a.name}}</td>          <td>{{a.price}}</td>          <td><span ng-click="jian($index)" style="background: royalblue;font-size: 15px">-</span><input style="width: 40px" type="number" ng-model="a.count" ><span ng-click="jia($index)" style="background: royalblue;font-size: 15px">+</span></td>          <td>{{xj(a.count,$index)|currency:"￥:"}}</td>           <td><button ng-click="delete ($index)">删除</button></td>      </tr>  </table>  <p>      <span>总价：</span>      <span>{{zongjia()|currency:"￥："}}</span><br/>      <span>邮费：</span><span>{{yf|currency:"￥："}}</span>  </p>   <button ng-click="fukuan()">付款</button>    <p><span ng-show="nn">实际付款:</span><span>{{sj|currency:"￥"}}</span></p></body></html>
阅读全文
1 0