商城购物车页面

最新推荐文章于 2024-01-11 10:23:11 发布

long553926

最新推荐文章于 2024-01-11 10:23:11 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/long553926/article/details/77530757

版权

<html>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet"
   href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">


<link rel="stylesheet"
   href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">


<script
   src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angularjs.js"></script>
<script>
        var app = angular.module('myApp', []);
           app.controller('myController', function($scope, $http) {
              $http.get("${pageContext.request.contextPath}/Shoppingcart/selectAll")
              .success(function (response) {
                       $scope.data=response;



              });
              $scope.reduce=function(index){
               var id=$scope.data[index].id;
                  $http.get("${pageContext.request.contextPath}/Shoppingcart/reduce?id="+id)
                      .success(function (response) {
                           --$scope.data[index].count;
                      });
              };

               $scope.add=function(index){
               var id=$scope.data[index].id;
                  $http.get("${pageContext.request.contextPath}/Shoppingcart/add?id="+id)
                      .success(function (response) {
                           ++$scope.data[index].count;
                      });
              };
                $scope.mycount=function(index){
               var id=$scope.data[index].id;
               var count=$scope.data[index].count;
                  $http.get("${pageContext.request.contextPath}/Shoppingcart/updatecount?id="+id+"&"+"count="+count)
                      .success(function (response) {

                      });
              };

                $scope.remove=function(index){
               var id=$scope.data[index].id;
                  $http.get("${pageContext.request.contextPath}/Shoppingcart/delete?id="+id)
                      .success(function (response) {
                           $scope.data.splice(index,1);
                      });
              };
           /*   $scope.totalPrice=function(){
              var sum=0;
                 angular.forEach($scope.data,function(obj,key){
                 sum+=obj.count*obj.product.price;
                 });
              return sum;
              }; */

              $scope.$watch('data',function(newValue,oldValue){
                  angular.forEach($scope.data,function(obj,key){
                     if(obj.count<1){
                         if(confirm("是否删除该商品"))
                         {
                          var id=$scope.data[key].id;
                          alert(id);
                         $http.get("${pageContext.request.contextPath}/Shoppingcart/delete?id="+id)
                         .success(function (response) {
                              $scope.data.splice(key,1);
                              });

                         }else{
                          $scope.data[key].count=oldValue[key].count;

                         }
                     }

                  });

              },true);
               var arr = new Array();
           $scope.pri=function(index){
              var count =0;
                         arr.push(index);


                          $scope.totalPrice=function(){
                           for (var i = 0; i < arr.length; i++) {
                               count += $scope.data[arr[i]].count * $scope.data[arr[i]].product.price;
                           }
                              return count;
                       };

           };




           });
</script>
</head>

<body ng-app="myApp">
   <div class="container" ng-controller="myController">
       <div class="page-header">
           <h1>
               我的购物车 <small>shopping</small>
           </h1>
       </div>
       <a class="btn btn-default"
           href="${pageContext.request.contextPath}/main.jsp" role="button">返回购物页面</a>
       <div class="col-md-offset-11">
           <button class="btn btn-danger" ng-show="data.length"
               ng-click="data={}">清空购物车</button>
       </div>
       <table
           class="table table-striped table-hover table-condensed table-responsive table-bordered "
           ng-show="data.length">

           <tr>
               <td><input type="checkbox" ng-model="box"></td>
               <td>编号</td>
               <td>商品名称</td>
               <td>商品单价</td>
               <td>购买数量</td>
               <td>商品小计</td>

               <td>操作</td>
           </tr>
           <tr ng-repeat="x in data">
               <td><input type="checkbox" ng-checked="box"
                   ng-click="pri($index)"></td>
               <td>{{x.id}}</td>
               <td>{{x.product.name}}</td>
               <td>{{x.product.price}}</td>
               <td>
                   <button class="btn btn-primary" ng-click="reduce($index)">-</button>
                   <input type="text" value="{{x.count}}" ng-model="x.count"
                   ng-blur="mycount($index)" style="width: 30px;">
                   <button class="btn btn-primary" ng-click="add($index)">+</button>
               </td>
               <td>{{x.count*x.product.price}}</td>
               <td><button class="btn btn-default" type="submit"
                       ng-click="remove($index)">
                       <span class="glyphicon glyphicon-trash"></span> 删除
                   </button></td>
           </tr>
           <tr>
               <td colspan="6">总计价格为:{{totalPrice()}}</td>
           </tr>
       </table>
       <div ng-show="!data.length">您的购物车为空，先购物</div>
   </div>
</body>
</html>

long553926

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
商城购物车页面

"> href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> src="https://c
复制链接

扫一扫